woocomerce filler | PenciDesign Support

thammyorg replied

5 years ago

Customer Reply

thank u so much

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

These elements you're building with Elementor, so please go to Elementor and change the display width for mobile.

You can view document here: https://elementor.com/help/mobile-editing/

Best Regards,
PenciDesign.

thammyorg replied

5 years ago

Customer Reply

well, done!
can i also split this into 2 columns on mobile?
thanks!

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please modify the custom CSS of 2nd replied like this:

@media only screen and (max-width: 479px) {
    body.woocommerce.archive ul.products li.product,
    body.archive.woocommerce-page ul.products li.product,
    body.woocommerce.archive .penci_sidebar ul.products li.product,
    body.archive.woocommerce-page .penci_sidebar ul.products li.product {
        width: 45% !important;
        margin-right: 4% !important;
    }
}

This code only applies to the archive and shop page.

Best Regards,
PenciDesign.

thammyorg replied

5 years ago

Customer Reply

Shop page has been divided into 2 columns, but it's displayed on the homepage like this
help me please
thanks!

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please add more CSS to Custom CSS:

@media only screen and (max-width: 479px) {
    .container.penci_sidebar.right-sidebar {
        display: flex;
        flex-direction: column-reverse;
    }
}

Best Regards,
PenciDesign.

thammyorg replied

5 years ago

Customer Reply

Thanks for the very quick reply!
I apologize for the lack of information in question #1.
I mean to show filter and search at the top in mobile version

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Please go to Appearance > Widgets, add Product Search & Filter Product by Price to Sidebar for Shop Page & Shop Archive.

2. Please go to Appearance > Customize > Custom CSS, then add the following custom CSS code:

@media only screen and (max-width: 479px) {
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .penci_sidebar ul.products li.product, .woocommerce-page .penci_sidebar ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
    }
}

Best Regards,
PenciDesign.

thammyorg started the conversation

5 years ago

Conversation Start

226 / 5000

I want to add product search and filter by price in shop page and product category, how do I do that?
On the mobile interface, I want in the shop page and the product list divided into 2 columns to display, how do I do that?