Return to previous page

Trying to achieve single stack in Shop Layout View for mobile

This topic has 2 replies, 2 voices, and was last updated 5 months ago ago by Tony Rodriguez

sethr

Participant

December 6, 2023 at 23:46
I did find forum posts asking for same thing… like: https://www.8theme.com/topic/shop-page-layout-on-mobile-is-not-stacking-elements/

But pasting that global CSS in did not seem to do the trick.

I am looking for solution to get my Shop Page Layout on Mobile to show a SINGLE COLUMN of stacked products (not double column as it currently is functioning).

Have there been any improvements to the theme to allow this and I am just missing it? Or do I need custom CSS and i’m just not applying correctly?

Currently i’ve tried in theme custom css > global:
```
@media only screen and (max-width: 992px) {
				.cart-checkout-multistep.cart-checkout-light-header .header-wrapper .et_b_header-logo {
				display: none;
		}
}
```
Currently i’ve tried in theme custom css > Tablet and Mobile:
```
.products-list .content-product .quantity-wrapper {
    width: 100% !important;
    justify-content: center;
}
```
Thank you in advance for assistance.
#375973 Copied Theme version: 9.2.5
1 Answer

Tony Rodriguez

Support staff

December 7, 2023 at 10:03

Hello, @sethr,

We are delighted to inform you that our XStore theme includes features that enable you to construct a Product Archive. To do so, kindly adhere to the instructions below:

1. Access the WordPress dashboard.
2. Navigate to ‘XStore Builder’ and select ‘Product Archive’.
3. Proceed to edit the Product Archive.
4. While in Edit mode, begin by copying the section you intend to replicate.
5. Within the copied section, make the necessary adjustments to the Archive products and General settings, ensuring that the columns are configured to meet your specifications.
6. Verify the responsiveness of the Elementor, particularly in the mobile view, to ensure optimal display.
7. Once you have fine-tuned the settings, highlight the entire section.
8. Move to the ‘Advanced’ options, select ‘Responsive’, and opt to conceal the section on Desktop devices. This will ensure that the section is exclusively visible on Mobile devices.
9. When updating, include a condition to define the specific locations where the Product Archive should be displayed, such as on the shop page.

For a comprehensive visual walkthrough, please consult the images provided at the following links:
– https://imgur.com/a/FXPjaqT
– https://imgur.com/a/wWQqg9k
– https://imgur.com/a/RKZ8Wx7
– https://imgur.com/a/bNxLLoc

We also recommend reviewing the XStore theme documentation for additional insights. The documentation is accessible via this link:
https://xstore.helpscoutdocs.com/article/191-xstore-products-archive-builder-with-elementor

Following these guidelines will enable you to tailor the Product Archive section to your preferences and guarantee its responsive functionality across various devices.

Yours sincerely,
The 8Themes Team

#376009 Copied
Tagged: achieve single stack mobile, mobile woocommerce themes, responsive wordpress shop layout, single stack shop layout, woocommerce mobile optimization, wordpress shop layout view
Viewing 2 results - 1 through 2 (of 2 total)

The issue related to '‘Trying to achieve single stack in Shop Layout View for mobile’' has been successfully resolved, and the topic is now closed for further responses

Trying to achieve single stack in Shop Layout View for mobile

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection