Home Forums WoodMart support forum Product layout on mobile (category page)

Product layout on mobile (category page)

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #407055

    s0mbrer0
    Participant

    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!

    #407114

    Elise Noromit
    Keymaster

    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

    #407447

    s0mbrer0
    Participant

    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.

    #407457

    s0mbrer0
    Participant

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

    #407488

    Elise Noromit
    Keymaster

    Hello,

    It should be like this:

    Please deactivate the cache plugins and check.

    Best Regards

    • This reply was modified 2 months, 2 weeks ago by Elise Noromit.
    #407562

    s0mbrer0
    Participant

    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.

    #408009

    Elise Noromit
    Keymaster

    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

    #408197

    s0mbrer0
    Participant

    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.

    #408232

    Elise Noromit
    Keymaster

    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

    #408314

    s0mbrer0
    Participant

    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.

    #408648

    Elise Noromit
    Keymaster

    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

    #408800

    s0mbrer0
    Participant

    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)

    #408805

    s0mbrer0
    Participant

    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?

    #408921

    Elise Noromit
    Keymaster

    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

    #409212

    s0mbrer0
    Participant

    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.

    #409413

    Elise Noromit
    Keymaster

    Hello,

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

    Best Regards

    #409481

    s0mbrer0
    Participant

    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.

    #410062

    Elise Noromit
    Keymaster

    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

    #411115

    s0mbrer0
    Participant

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

    #411899

    Elise Noromit
    Keymaster

    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

Viewing 20 posts - 1 through 20 (of 20 total)