[Support request] How to make woocommerce items light up

[kyle]

hey guys,

Is there any css that will make my woocommerce products on the home page light up like on the PRIME theme.

[Leo]

Hi there,

Prime is using this CSS:

.woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
    box-sizing: border-box;
}
.woocommerce ul.products li.product:hover, .wp-block-columns.contact .wp-block-column:hover {
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

More info on Prime here:
https://gpsites.co/prime/about/

You can always use the browser inspector tool to see the CSS involved.

[kyle]

Thanks, Leo

I added the CSS, but the buy product button is right on the edge of the border, how can i get a space there?

Also is there any way to make the products in the homepage do the same?

[Leo]

You can try adding some padding in this block of CSS:

.woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
    box-sizing: border-box;
}

As for the home page, it’s using WooCommerce block so you will need to find the correct selectors (by using the browser inspector tool) and apply the same CSS to them.

[kyle]

Hi Leo, it doesn’t look like that works. Must a replace that CSS with the last one?

Also, with regards to the homepage, I don’t quite understand how to do that?

[Leo]

You need to add some padding style to the CSS like this:

.woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 20px
}

As for the home page, we can’t really provide custom CSS help for content coming from another plugin unfortunately. But if you right-click on the element and use the browser inspector tool, you should be able to find the selector needed and apply the similar CSS to them:
https://www.screencast.com/t/vn1QL048Aq

The other solution is to use WooCommerce shortcode instead of block then the same CSS I provided should apply:
https://docs.woocommerce.com/document/woocommerce-shortcodes/

[kyle]

I’m not sure I understand how to open the inspector tool. Also, as for the shortcode can you send me an example of what the shortcode looks like?

[Leo]

An article like this might be useful:
https://www.templatemonster.com/help/use-google-chrome-web-inspector.html

Lots of other online resources on the same topic as well.

As for shortcode, did you take a look at the article above?

It includes examples like this:
https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-11

We have to be careful with providing support for other plugins/products here as they have their own support team:
https://www.screencast.com/t/xllIjblQas

Thanks for your understanding 🙂

[Author]

Posts