the product display on my shop page was abnormal

At 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.

Hello,

Can you please share the WP admin login details of your site so I will check and give you a possible solution?

Best Regards.

yes

I added Private content，Please check

Hello,

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.

Thank 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?

Hello,

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.

I 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?

Hello,

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.

Another question
When I add a product to my wishlist, I don’t want the product to be displayed on browse wishlist

I just want it to show: You can remove the wishlist with one more click

Attachments:

You must be logged in to view attached files.

Hello,

Go to Theme Settings > Shop > Wishlist > enable the option multiple wishlist select the show wishlist popup always.

Hope this helps!

Best Regards.

I 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?

Hello,

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.

How 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.

Hello,

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.

How can I add custom social button icons like wechat

Attachments:

You must be logged in to view attached files.

Hello,

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.

Hi 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.

Hello,

@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.

Hi 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.

Hello,

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.

Hi 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.

Hello,

@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.

Hi 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.

Hello,

Now check back your site and check the issue.

Best Regards.

Hi 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.

Hello,

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.

Hi 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!

Hello,

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.

Hi 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;
}

[Author]

Posts