Woocommerce background color

Support
#1

Hi there,
we have three issues with woocommerce.

  1. we want to change color of products background (also single product background, cart background etc) but we want to keep color of upper and bottom parts with red cross
    Bez názvu

  2. we want to change the size of the product font and wrap it. So each product will have the same size of text field / lines.

  3. how can we change button background, button hover but only for woocommerce. Not for the whole site.

Thanks a lot guys
Michael

Woocommerce text / background styling
#2

Hi Michael,

Thanks for reaching out.
To change the product background color in Shop, Single Product and Cart page, you need to add the following custom CSS code into the Theme Options > CSS.

.woocommerce-page .entry-wrap,
.woocommerce-page li.product
{
    background:transparent !important;
    border:none !important;
    box-shadow: none !important;
}

To change the font size of the product title, you need to add the following custom CSS code.

.woocommerce-page li.product .entry-header
{
    font-size:12px !important;
}

We are not sure which button you are trying to point out, if that is the Add to Cart button which comes up while hovering the Product, you need to add the following custom CSS code.

.woocommerce-page li.product .add_to_cart_button 
{
    background-color: #ff0000 !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

#3

Wow perfect thanks a lot. There is a still issue with a gap between product name and price. I was just checkin that longest product name has 3 lines so is it posible to add gap in 2 line products between name and price so the price will in the same place in the whole row.

Thanks
Michael

#4

Hi Michael,

You can set the height of each product by adding the following custom JavaScript code into the Theme Options > JS, but remember that you need to set the background color of li.product to check the height. I went ahead and set the color through the Browser Debugger Tool and it looks like the given screenshot.

rad Natural Prod
rad Natural Prod1210×290 42.7 KB

jQuery(document).ready(function($){	
        var max=0;
        jQuery("ul.products li.product").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        console.log( max);
        jQuery("ul.products li.product").css('height', max);
});

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide custom codes that mean we can’t fix it if it conflicts with something on your site nor will we enhance it.

Thanks

#5

Thank you for your reply. It solved the problem partially. There is a still issue with the position of prices. We want to have the prices in the same line Bez názvu so is there a way how to put a gap between product name and the price? (so the price will be always “the fourth line”)

Michael

How to make slide container elements the same height when dealing with different text length
Horizontal alignment of buttons between columns
How to Align Buttons to Bottom of 4 Columns in 1 Row
Content alignment inside looper list
Hello ! in the bottom image i have created a design of product and applied the looper but i want that if the title or description length is more than that doesn't affect the bottom line
Responsive design cards
#6

Hi Michael,

In that case, you need to adjust the height of the product title to equal for each product, and for that, you need to change the previous code a bit. The new code is following.

Screenshot-184- (1)
Screenshot-184- (1)1131×140 7.15 KB

jQuery(document).ready(function($){	
        var max=0;
        jQuery("ul.products li.product .entry-wrap .entry-header h3").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        console.log( max);
        jQuery("ul.products li.product .entry-wrap .entry-header h3").css('height', max);
});

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide custom codes that mean we can’t fix it if it conflicts with something on your site nor will we enhance it.

Thanks

#7

Many thanks. It is perfect. Just one last thing. As you can see the price too close to the text is there a way how to put a price little bit down.
Bez názvu

Michael

#8

Hi Michael,

You can add a little margin to the price element by adding the following custom CSS code.

.price
{
    margin-top:5px !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide custom codes that mean we can’t fix it if it conflicts with something on your site nor will we enhance it.

Thanks

#9

Many thanks

#10

Hi Michael,

You are most welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.