Home › Forums › WoodMart support forum › the product display on my shop page was abnormal
the product display on my shop page was abnormal
- This topic has 30 replies, 3 voices, and was last updated 10 months, 1 week ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
September 19, 2023 at 2:24 pm #497362
onestarryParticipantAt first, I found that the product display on my shop page was abnormal, with an extra line of space between the price and title (as shown in the picture);
Then I released multiple new products, and I found that the newly released products would have the same problem;
Next, I tried turning off: Layouts>Shop archive layout Furniture 2. Then the product display on the shop page returned to normal. When I turned on Layout, the same problem occurred again;
Next, I tried creating a new Layouts > New Layouts. I found that when a new Layout was opened, the problem occurred again;
I need the product display on the shop page to be normal when Layputs is turned on;
Attachments:
You must be logged in to view attached files.September 19, 2023 at 4:33 pm #497429
Aizaz Imtiaz AwanKeymasterHello,
Can you please share the WP admin login details of your site so I will check and give you a possible solution?
Best Regards.
September 19, 2023 at 7:40 pm #497518
onestarryParticipantyes
September 19, 2023 at 7:41 pm #497519
onestarryParticipantI added Private content,Please check
September 20, 2023 at 12:17 pm #497699
Aizaz Imtiaz AwanKeymasterHello,
It is an issue with your image size. If you upload the demo image it is working fine. You need to upload images of the same size for the grid.
Best Regards.
September 20, 2023 at 12:22 pm #497701
onestarryParticipantThank you.
What you mean is that I need to upload: 700*800 size pictures?
But all my product pictures are 1*1. Is there any way to use my 1*1 pictures while also making the product page display normally?
September 20, 2023 at 2:28 pm #497740
Aizaz Imtiaz AwanKeymasterHello,
Actually Woocommerce default recommended size of the images are 300×300 for the shop and category archive pages and 600×600 for single product pages.
Here is our article about Image size: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/
Best Regards.
September 21, 2023 at 11:26 am #497949
onestarryParticipantI have another question:
The size of the product image I uploaded must be larger than the main image size of a single product page on Woodmart. This image will not be blurry on a single product page, right?
Similarly, the size of the thumbnail I set should be larger than the size of the product thumbnail on the shop page, so that it will not be blurry, right?
September 21, 2023 at 3:20 pm #498064
Aizaz Imtiaz AwanKeymasterHello,
The size of the thumbnail you set should be larger than the size of the product thumbnail displayed on the shop page. If the thumbnail size is smaller than what the default size expects, it may appear blurry or not display correctly.
Please read this article about Image size: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/
Best Regards.
September 21, 2023 at 7:29 pm #498147
onestarryParticipantAnother question
When I add a product to my wishlist, I don’t want the product to be displayed on browse wishlistI just want it to show: You can remove the wishlist with one more click
Attachments:
You must be logged in to view attached files.September 22, 2023 at 11:12 am #498301
Aizaz Imtiaz AwanKeymasterHello,
Go to Theme Settings > Shop > Wishlist > enable the option multiple wishlist select the show wishlist popup always.
Hope this helps!
Best Regards.
November 20, 2023 at 11:12 am #513724
onestarryParticipantI purchased a WoodMart theme, what is the maximum number of websites I can activate the theme on?
In addition, I want to purchase a woodmart theme that can activate unlimited URLs. Do you provide this purchase option?
November 20, 2023 at 2:27 pm #513806
Aizaz Imtiaz AwanKeymasterHello,
You can only use one license for one live domain or site. If you want to use another domain then you have to purchase another license. But you can activate one license for one DEV website as well.
Best Regards.
November 24, 2023 at 1:49 pm #515259
onestarryParticipantHow does woodmart design different page displays for mobile phones? That is to say, when you visit the same page, you will see different content when you visit it on your mobile phone and when you visit it on your computer.
November 24, 2023 at 3:29 pm #515306
Aizaz Imtiaz AwanKeymasterHello,
It depends on your page builder and other conditions that you have on your website.
For example, if you use Elementor page builder, you can simply add another section with different content and show this section on other screen sizes. It’s managed by the option included in Elementor: https://elementor.com/help/mobile-editing/. More or less, some page builder plugins provide this feature as a “visibility option”, so you can research in their documentation about this feature.
In other conditions, you can check the responsive settings of theme elements.
Best Regards.
November 28, 2023 at 11:11 am #516230
onestarryParticipantHow can I add custom social button icons like wechat
Attachments:
You must be logged in to view attached files.November 28, 2023 at 3:49 pm #516379
Aizaz Imtiaz AwanKeymasterHello,
Go to Theme Settings > Social Profiles > enable the options sticky social links.
You will need to add the links to those you want to show and clear those you want to hide in the link to social profiles section.
Best Regards.
March 23, 2024 at 8:35 pm #551752
CristianParticipantHi Aizaz,
I am replying here as I see there is no follow-up from the original poster. I am also interested in adding a wechat icon to the socials sidebar.
For example, I would like to replace the Spotify icon with Wechat icon but the custom css that woodmart uses doesn’t have a wechat icon. How can this be done? Perhaps using font-awesome’s code for WeChat icon?Thanks.
March 25, 2024 at 11:06 am #551929
Aizaz Imtiaz AwanKeymasterHello,
@admin3097
Can you please add the spotify icon in the social profiles and share the page url so i will check and give you a possible solution.
Best Regards.
March 26, 2024 at 12:53 pm #552331
CristianParticipantHi Aizaz,
Thank you. I enabled the spotify icon (which is now blank, as i tried to change the code to font-awesome code and it didn’t work). I added the page link as private content. Thank you.
March 26, 2024 at 2:30 pm #552373
Aizaz Imtiaz AwanKeymasterHello,
Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
.social-spotify .wd-icon:before { font-family: "Font Awesome 5 Free"; content: "\u003E"; }
Then Navigate to Theme Settings > Performance > Fonts and icons > Font Awesome library > Choose always use. Change the icon code as per your requirements.
Best Regards.
March 27, 2024 at 10:58 am #552637
CristianParticipantHi Aizaz,
Thank you, I tried that and it doesn’t work. The unicode “u003E” is simply displayed as text. I also tried with code “f1d7” as found on the Font-Awesome website, and using FA6free font family but it just displays an empty square, no icon. I also tried to install the font awesome kit, and now it is available locally on the server at the link i posted as secure information, if you want to l ink the stylesheet.
For now i left the custom CSS as you suggested, using \u003E.
March 27, 2024 at 1:51 pm #552743
Aizaz Imtiaz AwanKeymasterHello,
@cristian
Can you please share the WP admin login details of your site so I will check and give you the possible solution.Best Regards.
March 27, 2024 at 3:03 pm #552763
CristianParticipantHi Aizaz,
Thank you for looking into this. I attached credentials in the secure info area. Please let me know what you changed if you make any modifications.
March 27, 2024 at 3:57 pm #552780
Aizaz Imtiaz AwanKeymasterHello,
Now check back your site and check the issue.
Best Regards.
March 27, 2024 at 8:32 pm #552846
CristianParticipantHi Aizaz,
What have you changed? It still does not work by the way, it shows as a blank square. Can you show me a screenshot on your end, if the icon is displayed correctly? Thanks.
Attachments:
You must be logged in to view attached files.March 28, 2024 at 10:55 am #552959
Aizaz Imtiaz AwanKeymasterHello,
Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
.social-spotify .wd-icon:before { font-family: "woodmart-font" !important; content: "\f167" !important; }
Navigate to Theme Settings > Styles and colors > Icons fonts > check the icons content and use as per your requirements.
Best Regards.
March 29, 2024 at 1:09 pm #553336
CristianParticipantHi Aizaz,
This shows the skype icon instead of spotify, but my request to you is to replace spotify with wechat (https://fontawesome.com/icons/weixin?f=brands&s=solid) – and wechat is not in your woodmart font family.
Can you please let me know if my problem isn’t clear?
Thanks!March 30, 2024 at 10:40 am #553491
Aizaz Imtiaz AwanKeymasterHello,
Please turn off all of the plugins not related to the theme, refresh your cache, and check if the problem persists.
Moreover, switch to the parent theme, and recheck it.
Try to use this custom css code:
.social-spotify .wd-icon:before { font-family: 'Font Awesome 5 Brands'; content: '\f1d7'; }
Best Regards.
April 1, 2024 at 9:40 am #553762
CristianParticipantHi Aizaz,
Your solution didn’t work, but I was able to get the icon to display by importing the FA6 fonts locally and linking to it in enqueues.php. Now the wechat icon is displayed. Thanks.
For anyone else wanting to do the same, to add/replace existing social icons with wechat/LINE for example, these are the steps you can follow:
1. download the font awesome 6 pack from their website.
2. upload the css files to /wp-content/themes/woodmart/css/
3. create a new folder called /wp-content/themes/woodmart/webfonts/ and upload the .woff2 files here
4. go to Appearance > Theme File Editor and select Woodmart
5. edit the file inc>enqueues.php
6. add this line somewhere under a similar one, for example line 648
wp_enqueue_style( 'fontawesome', WOODMART_THEME_DIR . '/css/brands.min.css', false, $version, 'all' );
7. edit the file inc>shortcodes>social.php line 259 and replace the word spotify with wechat
8. from theme settings menu, go to Custom CSS and add this code to replace spotify with wechat.social-spotify .wd-icon:before { font-family: 'Font Awesome 6 Brands'; /* Specify the Font Awesome brand icons font */ content: '\f1d7'; /* Unicode for the Weixin (WeChat) icon */ font-weight: 400; }
-
AuthorPosts
The topic ‘the product display on my shop page was abnormal’ is closed to new replies.
- You must be logged in to create new topics. Login / Register