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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts