- This topic has 7 replies, 2 voices, and was last updated 4 months ago by
Leo.
-
AuthorPosts
-
September 22, 2020 at 11:26 am #1454296
kyle
hey guys,
Is there any css that will make my woocommerce products on the home page light up like on the PRIME theme.
September 22, 2020 at 11:30 am #1454303Leo
StaffCustomer SupportHi 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/September 22, 2020 at 11:35 am #1454310kyle
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?
September 22, 2020 at 11:41 am #1454318Leo
StaffCustomer SupportYou 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/September 22, 2020 at 11:46 am #1454330kyle
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?
September 22, 2020 at 11:51 am #1454336Leo
StaffCustomer SupportYou 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/vn1QL048AqThe 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/September 22, 2020 at 12:05 pm #1454349kyle
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?
September 22, 2020 at 12:30 pm #1454373Leo
StaffCustomer SupportAn article like this might be useful:
https://www.templatemonster.com/help/use-google-chrome-web-inspector.htmlLots 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-11We have to be careful with providing support for other plugins/products here as they have their own support team:
https://www.screencast.com/t/xllIjblQasThanks for your understanding 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.