- This topic has 25 replies, 3 voices, and was last updated 3 years, 6 months ago by Tom.
-
AuthorPosts
-
September 10, 2020 at 2:31 pm #1438592TomLead DeveloperLead Developer
Have you considered using the WooCommerce blocks to build your products instead of the shortcode? I have a feeling the code would be much cleaner. It’s difficult navigating through their old shortcode CSS, unfortunately.
A child theme wouldn’t hurt, but it likely won’t make a huge difference when it comes to the CSS.
September 10, 2020 at 7:46 pm #1438766SteliosI’ve tried the WooCommerce block but that doesn’t “obey” at all to the CSS or the Customizer. I don’t know if I’m doing something wrong. Plus, the CSS seems messed up as I’m rearranging sections to get them to work only to break something else.
September 11, 2020 at 9:48 am #1439637TomLead DeveloperLead DeveloperThe Customizer options only apply to the standard WooCommerce archives – not the blocks or the shortcodes.
Perhaps forcing the products on the home page to be in one column on mobile would work better?
September 11, 2020 at 6:09 pm #1439990SteliosI’d rather avoid the one column on mobile from a UX point of view.
I’ve been searching the forum and I’ve replaced the top part of your previous code with your suggestion here:
https://generatepress.com/forums/topic/woocommerce-equal-height-in-grid-view/#post-858862Product archive pages are now fixed.
But, the mobile view issue remains with the misalignment of the first product:
https://drive.google.com/file/d/1_Pr-oO3G2Js-Aqf_IFyowCF7zJVdUAme/view?usp=sharing
Any possibility this can be fixed?Alternatively, I’ve been checking out the WooCommerce blocks scss and created a little Frankenstein of a grid. Any idea if this could be a viable solution?
September 12, 2020 at 11:29 am #1440811TomLead DeveloperLead DeveloperTry adding this CSS:
.woocommerce ul.products:before { display: none; }
September 12, 2020 at 3:43 pm #1440950SteliosPerfect! Thank you for the help and your time!
September 13, 2020 at 9:53 am #1441616TomLead DeveloperLead DeveloperNo problem! ๐
September 20, 2020 at 9:31 am #1451192SteliosHi again,
Regarding the current topic, how can I make the grid into one column for mobile (taking Tom’s advice after all) and two columns for tablet?
Edit: For the shortcode on Homepage
The CSS code:
/* Product archives and product blocks styles */ .woocommerce ul.products li.product { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1); border: 1px solid #ddd; transition: all 0.1s ease-in; border-radius: 1px; box-sizing: border-box; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #ffffff } .woocommerce ul.products li.product:hover { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); } .woocommerce ul.products li.product .button { margin-left: -10px; margin-right: -10px; color: #5C6873; text-align: center; text-transform: uppercase; border-top: 1px solid #E8F0F5; background-color: #ffffff } .woocommerce ul.products li.product .button:hover { color: #ffffff; background-color: #4c6721 } .product .woocommerce-Price-amount { font-weight: normal; font-size: 18px; } .woocommerce ul.products li.product.woocommerce-text-align-left .button { margin-left: -10px; margin-top: 0; } .woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; margin-bottom: 0; height: 100%; } .woocommerce ul.products li.product .woocommerce-LoopProduct-link > .price { margin-top: auto; margin-bottom: 10px; } .woocommerce ul.products li.product .woocommerce-LoopProduct-link > .woocommerce-loop-product__title { margin-bottom: 10px; } ul.products.columns-4 { display: flex; flex-wrap: wrap; } @media (max-width: 768px) { .woocommerce ul.products li.product.woocommerce-text-align-left .button { font-size: 15px; padding: 10px 5px; } .woocommerce .products { grid-template-columns: repeat(2,minmax(0,1fr)); grid-gap: 10px; } .woocommerce .products li { margin-bottom: 0 !important; } } .woocommerce ul.products:before { display: none; }
September 20, 2020 at 5:31 pm #1451509TomLead DeveloperLead DeveloperGive this a shot:
@media (max-width: 1024px) { .woocommerce ul.products li.product { width: calc(50% - 2.8%); box-sizing: border-box; margin-left: 1.4%; margin-right: 1.4%; } } @media (max-width: 768px) { .woocommerce ul.products[class*=columns-] li.product { width: 100%; margin-left: 0; margin-right: 0; } }
September 20, 2020 at 9:18 pm #1451587SteliosAwesome, thank you!
September 21, 2020 at 10:29 am #1452651TomLead DeveloperLead DeveloperYou’re welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.