[Resolved] Displaying Products on the Homepage

[Georgi]

Hello,

Sorry if this is not your field, I would be really glad if you can help.

I’m building the homepage again after switching to GP and I would like to showcase products on the homepage like this https://prnt.sc/26njdus with three tabs: new products, on discount and most chosen.

But I don’t see any blocks in the library from WC. I remember I saw before WC elements but now there is nothing in the library.https://prnt.sc/26njeud

Any idea how can the homepage product display be achieved?

Thank you in advance if you can help!

[Leo]

Hi there,

This should help:
https://woocommerce.com/document/woocommerce-shortcodes/
https://wordpress.org/plugins/woo-gutenberg-products-block/

[Georgi]

Thanks!

I have a question: if I use a template from the Site Library module and if I don’t like it, can I revert the changes?

[David]

Hi there,

if you install a Site Library, as long as you don’t make any changes to the site, when you go back to site library it will detect the previous site and ask if you want to remove it.

if the site your working on already has content I would recommend moving it to a staging site before importing sites on top.

[Georgi]

Hi,

Let me get something right: If I install a Site Library it will wipe out all content on the front end – menus will be wiped out and need to be created again, all setings in the customizer changed. In the admin panel, all product categories, products, pages will still be there. Correct?

[Ying]

If I install a Site Library it will wipe out all content on the front end

No, your content will still be there, but the new content from the site library will be added on top of your existing content.

In the admin panel, all product categories, products, pages will still be there

Yes.

Please make sure you import the site template to a staging site if you’ve already had content, just play it safe.

[Georgi]

Thanks for the clarification!

To return to the original task – I managed to pull out products on the homepage with a shortcode, thanks to Leo!
But the issue is the thumbnail for the products is quite small on mobile – https://prnt.sc/26qfob1

How can the thumbnail get enlarged for mobile?

Site is in the private area.

[Fernando]

If you go to Appearance > Customize > Layout > WooCommerce, you can change the product column value. Can you try setting this to 1 and see if this would result in the layout you’re going for?

See this for reference: https://share.getcloudapp.com/NQuxBgAK

Kindly make sure that you’re on mobile view when editing.

If this doesn’t work, here is a CSS you can try adding:

@media (max-width:768px){
    div.woocommerce ul.products {
        display: flex;
        flex-direction:column;
    }
    
    div.woocommerce ul.products li.product {
        width: 100% !important;
    }
}

Hope to hear from you soon! Please let us know how it goes. 🙂

[Georgi]

Hello Fernando,

Thank you for the answer! I currently use 2 columns for products on mobile and changing it to 1 would sure enlarge the thumbnails on the homepage but I believe the user experience in the product categories wouldn’t be optimal.

Using the CSS you gave actually works.

I actually have other custom CSS that seems similar and I’m wondering if they can be joined together somehow with the one you gave?

@media (max-width: 768px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;                 background-color: white;
    }

@media (max-width:768px){
    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill:black;
    }
}

[David]

Hi there,

you can move all the CSS rules inside a single @media query like so:

@media (max-width:768px) {
    
    div.woocommerce ul.products {
        display: flex;
        flex-direction: column;
    }
    div.woocommerce ul.products li.product {
        width: 100% !important;
    }

    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;
        background-color: white;
    }

    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill: black;
    }

}

[Georgi]

Hey David,

When I use the single @media query the mobile menu appears on both dekstop and tablet and the primary navigation has moved to the left: https://prnt.sc/26qxc9v

[David]

In your original CSS ( provided above ) there was an error, it was missing a closing bracket. See below:

@media (max-width: 768px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;                 background-color: white;
    }
    /* missing a closing bracket here */
@media (max-width:768px){
    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill:black;
    }
}

Which means ANY CSS below where that bracket would only apply if the @media (max-width: 768px) media query condition was met. So you probably had a bunch of CSS below it that is now no longer part of that broken query and needs moving inside a the @media query

[Georgi]

Hey David,

I’m not sure if I understand correctly what you mean because if I add a closing bracket in the single @media query you gave me, the issue still pertains:

@media (max-width:768px) {
    
    div.woocommerce ul.products {
        display: flex;
        flex-direction: column;
    }
    div.woocommerce ul.products li.product {
        width: 100% !important;
    }

    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;                 background-color: white;
    }
}   

    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill:black;
    }
}

    #mobile-header.has-branding button.menu-toggle {
        order: 0;
        flex: 1 0 15%;
        padding: 0 10px !important;
    }

[David]

If those CSS Rules are only for Mobile then your CSS would look like this:

@media (max-width:768px) {

    div.woocommerce ul.products {
        display: flex;
        flex-direction: column;
    }

    div.woocommerce ul.products li.product {
        width: 100% !important;
    }

    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;
        background-color: white;
    }

    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill: black;
    }

    #mobile-header.has-branding button.menu-toggle {
        order: 0;
        flex: 1 0 15%;
        padding: 0 10px !important;
    }

}

[Georgi]

Thanks, David!

I was wondering if you guys can lend a hand with expanding the walls of the Tabs container with products on the homepage, so they are moved to the sides of the screen for mobile OR better – removing the outlines of the container so that the products can spread normallly just like products without being in a Tabs (which I added below the Tabs module for example to see how they sit freely)

[Author]

Posts