I want product categories to show 2 column in one row

This topic has 50 replies, 4 voices, and was last updated 1 years, 2 months ago ago by Rose Tyler

  • Avatar: Wade Yang
    Wade Yang
    Participant
    January 14, 2023 at 15:19

    I want categories grid to show 2 column in one row ,but i don’t know how to set up ,and i find after use this theme ,The loading speed of the homepage is very slow when browsing on mobile phones, but other themes do not have this problem

    Please, contact administrator
    for this information.
    49 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 14, 2023 at 18:49

    Hello, @Wade Yang,

    I have just checked your site on my personal mobile phone and it is working perfectly fine for me, here is the video clip: https://www.veed.io/view/cc2a88b4-f3dc-4fb1-a338-d20ea79c59fa?sharingWidget=true&panel=share
    it is already showing the two columns on mobile, please check back to your site again now, after removing the browser cache.

    Regarding the Speed of the site, I have checked your site speed and here are the results: https://gtmetrix.com/reports/clubjerseys.online/3WofIdPY/ as you can see in the tested URL, the things that need to optimize in order to boost your site performance. The thing is our theme is already well-optimized all of our demos content is optimized. But, whenever a customer changes the demo content with his/her content and if the content is not optimized then he/she must need to optimize the content in order to get better performance results. Now, to optimize the site content to speed up the site load time you can use the WP Rocket plugin on your site. It will help you. Here is a link to documentation about the WP Rocket and how to use it: https://xstore.helpscoutdocs.com/article/128-how-to-improve-wp-rocket-settings-with-xstore

    You can check and use our theme Speed Optimization options as well, it will also help you in speeding up the site: https://xstore.helpscoutdocs.com/article/100-how-to-speed-up-my-website

    Regards 8Themes Team.

    Avatar: Wade Yang
    Wade Yang
    Participant
    January 14, 2023 at 20:04

    Thank you very much for your answer, but I don’t know why only one column is displayed in elementor, but two columns can be displayed after the smartphone clears the cache. What should I do if I want to hide the title of categories and want to display 3 columns per row?https://postimg.cc/V5JvqdSh

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 15, 2023 at 09:51

    Hello, Wade Yang,

    In order to assist you with your inquiry, we request that you provide us with temporary access to the wp-admin of your website. This will enable us to take a closer look at your settings and provide you with a more accurate and specific solution.
    To do this, please follow these steps:
    1 Create an account via Dashboard (Users > Add new) with administrator role. Refer to the following image for guidance: http://prntscr.com/s3rc9m
    2 Provide us with the username and password for the newly created account via the Private Content area. Refer to the following image for guidance: http://prntscr.com/s5mao7
    3 Any email address can be used for the new account, it does not have to be your personal email.
    Please let us know once you have completed these steps, and we will promptly review your account information and provide assistance as soon as possible.

    Best Regards,
    8Themes Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    January 15, 2023 at 20:25

    I have put the information ,and I still have a lot of questions about page optimization on mobile

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 16, 2023 at 06:06

    Hello, @Wade Yang,

    As you can see in this screenshot: https://postimg.cc/gX4qQQqF there is no option available in the widget setting to set the columns on mobile. Second, if you want to hide the title you can edit the title and from the “Responsiveness” option of Elementor you can hide it see the image: https://postimg.cc/fSJXFLRm Now, Regarding the two columns display issue on mobile it is working fine as well. I have checked it on my personal mobile phone and recorded a video for you here is the video link: https://streamable.com/r9mi4a

    For the mobile optimization questions simply create a new topic and describe the issues in the detail.

    Regards 8Themes Team.

    Avatar: Wade Yang
    Wade Yang
    Participant
    January 16, 2023 at 06:20

    What I said is the name of the categories, not the title you mentioned. What if I want to change two columns to three? In the video, you can see that when the display method of Product categories is slider, the picture is too large. What should I do if I want to display 3 columns in one row?

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 16, 2023 at 06:56

    Hello, @Wade Yang,

    1- In order to solve your issue simply go to the Dashboard >> XStore >> Theme Options >> Theme Custom CSS >> Global and paste the below code at the bottom of the CSS box there.

    .category-grid .categories-mask h4{display:none !important;}

    Then save settings and check back to your site after clearing the browser cache. The result will appear like this: https://postimg.cc/K4jMmJnN

    2- From the category widget slider settings you can change the columns as I showed you in this image: https://postimg.cc/BLdwQtwc

    Regards 8Themes Team.

    Avatar: Wade Yang
    Wade Yang
    Participant
    January 16, 2023 at 13:18

    If the Display Type of Product Categories is Grid, how to set it to achieve three columns and one row

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 17, 2023 at 09:59

    Hello, @Wade Yang,

    I have changed the CSS a little and it solved your issue, please check back to your site now after clearing the browser cache: https://www.veed.io/view/e08c56ff-b1a2-47b4-8cba-cde05d9778b8?sharingWidget=true&panel=share

    Regards 8Themes Team.

    Avatar: Wade Yang
    Wade Yang
    Participant
    January 19, 2023 at 01:14

    Thank you for your reply, but why do I still display one column and one row when I browse with iPhone 7plus? I have cleared the browser cache, before it was possible to display two columns and one row
    https://postimg.cc/yJNsXYJ1
    https://postimg.cc/yJrBf49F

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 19, 2023 at 06:56

    Hello @Wade Yang,

    We are pleased to inform you that your issue on the iPhone 7 Plus has been resolved. Please clear your browser cache and check your site again. Additionally, we have included a video link (https://streamable.com/0m2bi7) to demonstrate the resolution. Furthermore, we have added a line of custom CSS code in the widget settings and have included images (https://postimg.cc/tZ46rrJ4 and https://postimg.cc/ZBQWw4Xw) to illustrate the changes.

    We hope this information is helpful.

    Best Regards,
    8Theme’s Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    February 8, 2023 at 14:22

    The original homepage can work well after you add the code, but now I will make a new homepage first, but I don’t know what Customm CSS to add now.Now it can no longer be displayed as before

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    February 9, 2023 at 05:40

    Hello Wade Yang,

    We have made some modifications to the code which have resolved your issue. Please refer to the screenshot provided at the following link: https://postimg.cc/R3SkSst5. We recommend that you clear your browser cache before revisiting your site.

    Best Regards,
    8Theme’s Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    February 21, 2023 at 05:14

    If I create a new homepage next time, should I use @media(max-width:768px){ .category-grid.col-xs-12{width:33.33% !important;}
    } This code can be displayed correctly on the mobile phone?There is another problem, when I use the Filter function in the theme, the picture cannot be loaded immediately,https://postimg.cc/d7K76b9Y
    There is another problem. When I use the Filter function in the theme, the picture cannot be loaded immediately, and the picture can only be displayed when I click to refresh. I have tried many browsers, but this is the case https://postimg .cc/3WyKyLgC

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    February 21, 2023 at 08:24

    Hello @Wade Yang,

    1. Yes, you must use the same code and it will be compatible with mobile devices for the same element.

    2. We are pleased to inform you that your issue has been resolved. Please clear your browser cache and check your site again. The issue was caused by the Jetpack plugin, which we have now disabled. We have also recorded a video to demonstrate the resolution of the issue, which you can view here: https://www.veed.io/view/8d6e8c9f-6d4c-4910-b7ef-87595d5ce117?sharingWidget=true&panel=share

    Best regards,
    8Theme’s Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    February 28, 2023 at 19:57

    If I use WPBakery Builder, how can I put the Title in the middle and set the text size? There is also a way to put 3 images in one row?
    https://postimg.cc/gwjRgpRD

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    March 1, 2023 at 08:54

    Hello Wade Yang,

    1. We would like to know where you would like to set the title in the middle. Please provide us with a screenshot that has been marked and the page URL.

    2. Additionally, we would like to know which images you would like to place in a single row. Please provide us with a screenshot that has been marked, and the page URL, and let us know if you would like this to be on the mobile version only.

    We look forward to hearing from you.

    Best Regards,
    8Theme’s Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 4, 2023 at 11:48

    Thanks for the reply, the problem has been solved.
    I checked the title of the product on the mobile phone, and felt that the title text was too large. How can I set the size of the title text?
    https://postimg.cc/pmDhrQvb

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 5, 2023 at 09:21

    Hello, Wade Yang,

    Do you mean the Shop page?
    We are pleased to inform you that you can now adjust the character limit for product titles in the Theme Options > WooCommerce > Shop > Products Style section.

    Kind Regards,
    8theme team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 6, 2023 at 08:02

    Hello, what I mean is how to set the font size smaller so that as much text as possible can be displayed in two lines
    This is the current display:
    https://postimg.cc/5Qd4Dzgz
    This is the display effect I want
    https://postimg.cc/NKMcJbtV

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 6, 2023 at 11:50

    Dear Wade Yang,

    Thank you for the reply.

    We noticed that you did not provide URLs of the pages from which the screenshots were taken. However, you can try to add the following code in Theme Options > Theme Custom CSS to change the font size of product titles:

    .content-product .product-title {
        font-size: 12px;
    }

    – change 12px to the desired value.

    We hope this information is helpful.

    Kind Regards,
    8theme team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 6, 2023 at 17:51

    This is the website link:
    https://clubjerseys.online/
    I try to put your code into Theme Custom CSS, but there is no change in font display on mobile:
    https://postimg.cc/RW8BZSXG
    There is another problem, I want to set 12 columns, but this can only set up to 6, how can I set it?
    https://postimg.cc/jw36G1sW

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    March 6, 2023 at 18:31

    Hello,

    #1 You need to replace your custom CSS

    
    .content-product .product-title {
        font-size: 12px;
    }
    

    with the one provided below.

    
    .content-product .product-title {
        font-size: 12px!important;
    }
    

    #2 Unfortunately, this can only be done with additional customization.

    Your question requires additional customization. You can contact our partners, WP-Kraken team, who will perform your task quickly and with high quality. https://wpkraken.io/?ref=8theme

    Best Regards,
    8Theme’s Team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 7, 2023 at 07:14

    https://postimg.cc/62T35sxs
    https://postimg.cc/PpBtXPMZ
    https://postimg.cc/62GXmBNQ
    This is the Product Categories Settings, but the page cannot be displayed correctly after setting to 6 Columns。
    But after setting 5 Column, it can be displayed correctly,Here is a screenshot:
    https://postimg.cc/LqDDFP2C

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 7, 2023 at 09:43

    Hello, Wade Yang,

    We kindly request that you provide us with the URL of the page where the issue is visible.
    Thank you for your cooperation.

    Kind Regards,
    8theme team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 7, 2023 at 11:09

    https://nbashopclub.com/
    that is the URL of page

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 7, 2023 at 11:11

    How to make all product pictures displayed at the same height? here is the link:
    https://postimg.cc/ftLTSDxW

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 7, 2023 at 13:15

    Hello, Wade Yang,

    1/ Thank you for the URL. We would also appreciate temporary WordPress admin and FTP access.

    2/ We suggest disabling the Products Masonry in Theme Options > WooCommerce > Shop > Shop page Layout. Additionally, you may try the code provided in this topic: https://www.8theme.com/topic/problem-with-products-layout-in-shop-page/#post-316130
    We hope this helps.

    Kind Regards,
    8theme team

    Avatar: Wade Yang
    Wade Yang
    Participant
    March 7, 2023 at 15:07

    Thanks for the reply, it’s ok now.
    But according to the picture, I want to set the size of the picture of the Patch option, but the size of the option remains unchanged. How to do it?
    https://postimg.cc/v4Npdfm8
    https://postimg.cc/k6vC9GZj

  • 1 2
    Viewing 30 results - 1 through 30 (of 50 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.