Product layout on mobile (category page)

Hi!

We were wondering if it is possible to get the layout of the products displayed on the category/shop page like the picture I enclosed. So ‘horizontal’ — picture and next to it (on the right side) the title, button etc.

Thank you!

Hello,

Yes, you can configure the list on mobile for product categories by creating Theme Settings: https://xtemos.com/docs-topic/theme-settings-panel/

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

We have selected List style for mobile but on our shop the products are displayed not as we want to. Please see our website.

I have added our staging area so maybe it is easier to check it

[Elise Noromit]

Hello,

It should be like this:

Please deactivate the cache plugins and check.

Best Regards

• This reply was modified 2 years, 2 months ago by Elise Noromit.

Hi Elise,

I have done it, but it only changes the list style on desktop. On a mobile device it does not show list style.

To be clear on desktop we need it to stay grid style and on mobile we need it to be list style as the picture I sent before.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-list-item .product-wrapper {
		display: flex;
		align-items: center;
    flex-wrap: nowrap;
}

body .product-list-item .product-element-top {
		flex: 0 0 30%;
    margin-bottom: 0 !important;
    margin-right: 15px;
}

body .product-list-item .product-list-content {
		flex: 1 1 auto;
		text-align: start;
}

body .product-list-item .woocommerce-product-details__short-description {
	display: block;
}

This code makes list design on mobile.

If you have any questions please feel free to contact us.

Best Regards

Great thank you!

We would like to know if the following is also possible:
1. Is it possible to have lines between the products? On desktop there are lines. We would like to have this on mobile too.
2. Is it possible to change the text in the button to an icon/image?
3. Is it possible to remove the short description on mobile? (That is shown beneath the price)
4. Is it possible to change the position of the button to right?

Thank you in advance.

[Bogdan Donovan]

Hello,

1. I check the shop page and it has the border:
2. You can translate/rewrite all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

Please check the video tutorial to see how to save the translation file correctly. You can remove the plugin and translations would remain. Also, translations would remain after each theme update.

In order to translate the WooCommerce strings, you need to create a separate translation in Loco > Plugins > WooCommerce in the same way as shown in the video.

3. and 4. Please provide the page URL where you want ot change that.

Best Regards

• This reply was modified 2 years, 2 months ago by Bogdan Donovan.

Hi Elise,

1. When we use the code you gave us there is no lines. The code we tested in our staging area and is not live yet. You can check it on our staging area.
2. We don’t need a translation. We need it to be an icon. How do we need to change that?
3/4. All the questions above are about the code you sent us to change the product view to list style on mobile. So we need to know what the code is to add for removing the description and change the position of the button. If you can check it on our staging area, would be great.

Hello,

1. Please replace the code provided before for this one to add the border:

body .product-list-item .product-wrapper {
		display: flex;
		align-items: center;
    flex-wrap: nowrap;
}

body .product-list-item .product-element-top {
		flex: 0 0 30%;
    margin-bottom: 0 !important;
    margin-right: 15px;
}

body .product-list-item .product-list-content {
		flex: 1 1 auto;
		text-align: start;
}

body .product-list-item:not(:last-child) .product-wrapper {
    padding-bottom: 30px;
    border-bottom: 1px solid;
    border-bottom-color: var(--brdcolor-gray-300);
}

2. It is not possible to insert your image, you can remove the text and leave the icon, please use this custom:

body .product-list-item .product-wrapper .wd-add-btn a {
	width: 50px;
	height: 35px;
}

body .product-list-item .product-wrapper .wd-add-btn-replace .add-to-cart-loop:before {
    transform: translateY(0) translateZ(0);
}

body .product-list-item .product-wrapper .wd-add-btn a span {
		display: none;
}

This custom would alight right:

body .product-list-item .product-wrapper .wd-add-btn {
	text-align: right;
}

Best Regards

Perfect! Thank you for your help Elise.

And the short description? Is it possible to remove the short description on mobile? (That is shown beneath the price)

I am seeing that in our live shop the short description also is gone. So it seems to be ok. Only now the issue is that we also have the list style on desktop. We need it only to be on mobile and on desktop it needs to stay grid style. How to solve this?

Hello,

You can hide any widget of the Elementor in the section/widget Responsive settings.

Your product page is created in Elementor and you would better hide the sections correctly.

Best Regards

Hi Elise,

We are not using Elementor. I have added our staging area in the private area so can you please check again.

Thank you.

Hello,

Please provide the page URL where you have the short description.

Best Regards

Hi Elise,

It is not about the short description. As mentioned earlier we need a grid style for our category/shop page on desktop and a list style on mobile. With the code you sent me above the list style works on mobile (so that is no problem anymore) but the list style is now also on desktop. We need it to be grid style on desktop.

There is also an additional thing we discovered yesterday. If you search on desktop via the search bar the grid style appears.

Can you please check. If not clear please feel free to ask.

Hello,

You have already had this configured using the theme presets: https://prnt.sc/iusdc-Xk-KdY everything works on mobile: https://prnt.sc/7s8DZ16PuYJl and on the desktop https://prnt.sc/ZIlYgS7dlig4

Please check this on an actual device.

Best Regards

Hi Elise, please see private area. As you can see it does not work in some areas.

Hello,

You need to edit the condition and remove the Product category in the preset: https://prnt.sc/BsSw75spwdL2

If you have any questions please feel free to contact us.

Best Regards

Hi there, we did the last theme update and suddenly the list style on the product category page is not working anymore on mobile. Could you please check and give us the correct updatet CSS code?

Hello,

Please provide the product page URL.

Please, confirm the permission for plugins deactivation, and switching to the parent theme. As soon as we complete the testing we will enable all back, however, the site would be without plugins for 15-20 min. You would better make the full backup of your site.

Best Regards

Hi, Please see private area.

Hello,

I am checking your site, I view the home and shop page and I cannot catch the problem, could you kindly provide page URL and screen with the problem or steps to reproduce it?

If you have any questions please feel free to contact us.

Best Regards

Please see content in private area.

Hello,

Yes, the list view switches to the grid on mobile. The recent version has changes in the CSS.

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-list-item .product-wrapper {
	flex-direction: row;
}

body .product-list-item .product-element-top {
	margin-right: 0 !important;
}

body .product.product-list-item .wd-add-btn {
	justify-content: end;
}

Best Regards

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts