How to Add such option. If possible, from theme settings or else, some other way

[harshwe]

Hello Luke Neilson,

I wanted to know how can we achieve below. Is something available in Theme options. If not, via some other way-

1. How to show icons besides Product tabs (like description, Additional Info, Reviews) as shown below
https://i2.paste.pics/FBNQ5.png (for 1-3 points)

Page URL to refer – https://bit.ly/3lY3iEM (From Uncode)

2. Different Active and mouse hover colors for Product Tab Titles or names. How can we have and show different colors of Titles on Mouse Hover and different for Active State (like Accordion Element)

3. Opener style from “+” icon changed to “x” icon while in Open state of Product tab.
How can we change the style to other mini-icon, in open state, like above.

4. Showing images besides Reviews (Probably, this may already be there as default in woocommerce for users who already added their pic). If not, then please suggest, how can we do that.

5. How to show “Name and Email” fields and make them Mandatory to post Review. Currently, only message field is showing on our site. In your demo, the fields are displaying for Name and emails.
I think we are missing something.

6. Can we show product thumb images (of ordered items) in the Checkout page, just like this-
https://undsgn.com/uncode/checkout-fluid/

PS: Although we did added a custom snippet to show, but if this can be achieved from the Theme options itself, then would make much easier, and avoid extra codes. And helpful for our customers too.
If such option could be integrated, then that would be very much appreciable.

Please suggest

Regards

• This topic was modified 3 years, 1 month ago by harshwe.

Hello,

1. In order to show the icons besides products tabs, please try to use this custom CSS code.

.tabs-layout-accordion .wd-accordion-title:before {
    padding-left: 15px;
    padding-right: 15px;
}

The icon before the description tab:

.tabs-layout-accordion .tab-title-description:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

The icon before the additional tab:

.tabs-layout-accordion .tab-title-additional_information:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

The icon before the reviews tab:

.tabs-layout-accordion .tab-title-reviews:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

The icon before the shipping tab:

.tabs-layout-accordion  .tab-title-wd_additional_tab:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

In the “content” attribute you can change your icon using Unicode from the “Font Awesome” service (https://fontawesome.com/).

2. Here is the custom code for changing hover and active color for the accordion.

.tabs-layout-accordion .wd-accordion-title:hover {
    background-color: #f8f8f8;
}

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title.active {
    background-color: #f8f8f8;
}

3. You can change the opener style for the accordions owing to using this custom CSS code.

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title:after {
        content: "\f143";
}

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title.active:after {
    transform: rotate(
135deg);
}

https://gyazo.com/6abea2b5e384227d8238d5dd1e8049aa

5. The “Name and Email” fields display when you don’t log in an account or you are unregistered.

https://gyazo.com/0864c2810182859e58a6b5faeeee2742

Also, these fields are mandatory to fill.

https://gyazo.com/c8ae9a810fa9dc805c383ba24cab38f1

6. In order to show products thumbnails on the checkout page, please try to add this custom PHP code to the functions.php file in your child theme.

if ( ! function_exists('wd_product_image_on_checkout') ) {
    function wd_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
        
        if ( ! is_checkout() ) {
            return $name;
        }
        
        $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
        
        $thumbnail = $_product->get_image();
        
        $image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
            . $thumbnail .
            '</div>';
        
        return $image . $name;
    }

    add_filter( 'woocommerce_cart_item_name', 'wd_product_image_on_checkout', 10, 3 );
}

Kind Regards

[harshwe]

Hello Luke,

1. Thank you for sharing the CSS. This worked.
How can I use and show the any SVG image instead of font awesome icon. What update is require in that same CSS, that you shared, in order to show the SVG image instead.
For all of those product tabs.

1.a. For one of the Global Custom tab – named “Shipping” you suggested-

The icon before the shipping tab:

.tabs-layout-accordion  .tab-title-wd_additional_tab:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

Can you please suggest CSS that affect just this 1st Global Custom tab, named – “Shipping” and not other ones.
Hence, similarly, what CSS will work for the remaining 2 Custom tabs.
How the above code will differ for other 2 Global custom tabs.

1.b. How to change and update the icons (Wishlist, Search, Cart) with other font-awesome, as well as using our own SVG image.
Can you please suggest CSS for both icon and SVG image.

2,3. Will check these 2 also. I am sure, the one you shared, will definitely work.

4. I think this might have got skipped somehow. Can you please suggest on this.

Showing images (of Reviewer) besides Reviews (Probably, this may already be there as default in woocommerce for users who already added their pic). If not, then please suggest, how can we do that.

Just wanted to know, Are customers allowed to update their profile image, or we have to update change the image. Or it can be changed from both. Either customer or subscriber as well as from our side.

5. Oh, Yes. That makes sense. Got it.

6. Yes, this worked, too.
We used some other snippet action earlier. Will use this one instead.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

1. Sorry, but we don’t have such custom code for displaying SVG icons.

1b. You can use only 1 custom code for the “Shipping” tab and this code will affect only by this one tab.

https://gyazo.com/55e3206c69b780f4b8de0622ba3cc291

You can upload your own icon for the “Search”, “Wishlist”, “Cart” by means of the uploading custom icon in Theme Settings -> Header Builder.

https://prnt.sc/238zfkc

4. By default, WordPress relies on the Gravatar service for user profile pictures, which means that your site will show the avatar associated with each user’s email in Gravatar.

https://gravatar.com/

Kind Regards

[harshwe]

Hello Luke,

1. But there is a way to show the custom image (if not SVG), instead of icons.
How can I use and show using our own image instead of font awesome icon. What update is require in that same CSS, in order to show the image instead (before product tab name)

1.a. We will be having another Global custom tab, named – Wholesale. What will happen in that case.
So, what CSS will work for this Custom tab, to show icon before product tab name

1.b. Here, I do not want to use Font awesom icon. I mean by custom image.
Can you please suggest CSS on how to change and update the icons (Wishlist, Search, Cart) using our own image.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

[Luke Nielsen]

Hello,

1. Sorry for my mistake, here is a solution for displaying the SVG icon.

.tabs-layout-accordion .wd-accordion-title {
   display: flex !important;
   align-items: center;
}

.tabs-layout-accordion .tab-title-additional_information:before {
    content: ' ';
    display: inline-block;
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

https://gyazo.com/57e1e8cd0814094b1501885ce7392cba

1a. Send me a URL link where you have a custom tab and I will prepare custom CSS for you.

1b. I mentioned above about custom image for some of these elements, for the “Wishlist, Cart“ you can upload a custom image without custom CSS, please navigate to WoodMart -> Header builder -> edit some of these elements and upload your custom image from the media (see video below).

https://monosnap.com/file/S9ZI3rCmFp4tgbr3Hm9ORKLzPcpqFn

As for the “Search” icon, it can be changed using Font Awesome only.

.searchform .searchsubmit:after {
      content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

Kind Regards

• This reply was modified 3 years, 1 month ago by Luke Nielsen.

[harshwe]

Hello Luke,

1. Thank you for sharing the CSS to upload SVG image instead.
Do I need to change just the first line in that custom CSS, in order to show images in all other products tabs too.
Means, do I need to replace just this below line, from that whole custom CSS (that you shared)-
.tabs-layout-accordion .tab-title-additional_information
With this-
.tabs-layout-accordion .tab-title-description
And so on.. for other tabs. And let the rest of CSS code, as it is.

Q. And do I need to use below code only once for all 4 tabs (that is, at top of the custom CSS for all 4 tabs)-

.tabs-layout-accordion .wd-accordion-title {
   display: flex !important;
   align-items: center;
}

1.a. I will have to add that 2nd custom tab later-on. Can you please suggest what CSS will work for 2nd custom tab, just like the CSS that you shared for 1st Custom tab, named – “Shipping”

1.b. Yes, I found that. I will upload image from there.

1.c.You suggested – “As for the “Search” icon, it can be changed using Font Awesome only”
This is something, that is not clear. As the Upload Image option is showing while Configuring Search settings also.
As can be seen from here- https://i2.paste.pics/FDCWY.png
Can you please clarify.

1.d. Also, if the above still won’t work, somehow, then what we need to update in below code, to replace the search icon (from font awesome) with our image (from media) –

.searchform .searchsubmit:after {
      content: '\f274';
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
}

I think, besides -“Content:” parameter, value for custom URL needs to be replaced or added, or somewhat similar. Can you please suggest

7. There is an underline animation that shows on Mouse-hover on Primary Menus in Main Menu navigation (on Header)
How to show same underline animation on Mouse-hover on Sub-menus also.
Please see this –
https://bit.ly/3scB115

7.b. How to make these tiny arrows (dropdown) besides Menu names, somewhat larger.
https://i2.paste.pics/FDDXS.png
As well as in dark color (say Jet black, or matching with the Primary Color of Site (choosen from Styles and Colors)
Currently, these are barely visible.

Issue or Bug:
8. There is an issue in Main Slider (Woodmart’s) on Home page.
The first 3 slides are of showing and matching with same height, while the 4th one (last one, that we added) is showing bit larger in height.
Even though the size (height ) of right side images from all 4 sliders are same.
As well as, other settings of slides are exactly same too. (we copied the original 4th slider from Demo and then replaced just with our image, with same dimensions)

Due to this, there is an unusual shift, the moment 4th slide comes into screen, and goes away too. Resulting in Shift of other contents too (that are below sliders, that is Brands)

I tried to check each setting, but could not replicate, as for what reason the 4th slider is showing bigger in height and hence shifting too.
https://bit.ly/3mecvZO

Please check above video and suggest what be causing this issue.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

1. Yes, you are right.

Q. This code you can use if you will have some problem with the SVG aligning.

https://monosnap.com/file/aFCYAVGdrZpsAEOAWo8sYwIdqB2HdX

1a. Here is the code for showing the icon before your custom tab.

.tabs-layout-accordion .tab-title-wd_custom_tab:before {
    content: ' ';
    display: inline-block;
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

https://gyazo.com/89553c32d5ff10038fd0f975ea6ffa27

1c. Sorry, it’s my mistake, you can also upload the icon via the “Search” icon settings.

https://prnt.sc/23vjopn

1d. I have checked it again and it works fine.

https://gyazo.com/e14cd1b3549df28d0e49d9ff3608188e

This code doesn’t matter if the icon can be changed through the settings.

7. Unfortunately, the HTML structure of the dropdown menu doesn’t allow to change the hover of the items.

7b. Enter the code to the “Global Custom CSS” area for changing the color of the menu arrows.

.wd-nav[class*="wd-style-"]>li.menu-item-has-children>a:after {
    color: #605d5d;
}

8. The issue is that you have added to the “Price” block the indent from the top (padding-top: 2vh) and it adds to the slide an additional height.

https://prnt.sc/23vy4mw

Please, remove it and check the issue.

Kind Regards

[harshwe]

Hello Luke,

1.Q. Thanks for explaining. This small vided really helped a lot, to understand.
Thanks 🙂

1.a. OK. Will use that, once I create 2nd Custom tab. Thanks for sharing 🙂

1.c. No problem. Thanks for clarifying

1.d. What is the maximum allowed size for custom icon or images for Search, Wishlist and others, to use, instead of existing ones.
What is the size of current icons. Is it 25×25 px for Search, Wishlist..

7. OH. But we really want this.

How to show same underline animation on Mouse-hover on Sub-menus also.
Please see this –
https://bit.ly/3scB115

Is there some way, to show this.

7.b. The code is for changing the color only. I requested for increasing the size also.

How to make these tiny arrows (dropdown) besides Menu names, somewhat larger.
https://i2.paste.pics/FDDXS.png

Can you please suggest what CSS will work to change the Size as well as color, in one code.

8. Yes, that worked. I might have added that for purpose, and probably forgot.
Thanks for identifying it. I will either remove that extra padding from that last slide or add the same padding in other slides too.

8.a. I noticed, that earlier, I was able to drag to change or switch the slides with Mouse (click-hold and then drag). But now, it is not working. Now, slides can only be switched by clicking the arrow buttons (at extreme ends).

What I am missing. Probably, there is some setting, due to which “click and drag” the slide is not working (You can refer same previous video, where I was able to click-hold and drag the slides)
PS: Check that Video, 25 second onwards

9. Similarly, how to display icons besides each field name, on My Account page. (Like we did on Single product page, and displayed for product tabs.)
https://i2.paste.pics/FEUO7.png

Regards

• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.

[Luke Nielsen]

Hello,

1d. It doesn’t matter what size your picture is because it will be reduced to 40×40 or 45×45 (as you can see on this https://gyazo.com/46d2b57d0b1719a561a37289a9f678b0 screenshot I have uploaded the image 700x800px). The current size of icons is 20×20.

7. Sorry, but it is not yet possible.

7b. I have rewritten it, please check.

.wd-nav[class*="wd-style-"]>li.menu-item-has-children>a:after {
    color: #605d5d;
    font-size: 9px;
}

8a. I checked your slider, it switches the slides with Mouse, please check the video below.

https://monosnap.com/file/yHzPSok3mXSDUMlTOTg264EVZfoIoI

9. Here is a custom CSS code for displaying icons for each navigation link.

.woocommerce-MyAccount-navigation-link,
.woocommerce-MyAccount-title.entry-title {
    position: relative;
}

.woocommerce-MyAccount-title.entry-title:after,
.woocommerce-MyAccount-navigation-link--dashboard a:after,
.woocommerce-MyAccount-navigation-link--orders a:after,
.woocommerce-MyAccount-navigation-link--downloads a:after,
.woocommerce-MyAccount-navigation-link--edit-address a:after,
.woocommerce-MyAccount-navigation-link--edit-account a:after,
.woocommerce-MyAccount-navigation-link--ppcp-paypal-payment-tokens a:after,
.woocommerce-MyAccount-navigation-link--wishlist a:after,
.woocommerce-MyAccount-navigation-link--customer-logout a:after {
    display: inline-block;
    position: absolute;
    right: 0;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    height: 15px;
    width: 15px;
    margin-right: 10px;
}

.woocommerce-MyAccount-title.entry-title:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-50x50-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--dashboard a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-50x50-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--orders a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--downloads a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--edit-address a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--edit-account a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--ppcp-paypal-payment-tokens a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--wishlist a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

.woocommerce-MyAccount-navigation-link--customer-logout a:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-2nd.svg');
}

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.

[harshwe]

Hello Luke,

1.d. Thanks for clarifying. Really helpful

7.b. Yes, this worked. Thanks 🙂

9. Yes, this worked perfectly. The only areas, it is not showing icon or image is besides the “My Account” field itself. As shown here,
https://i2.paste.pics/FFOUS.png
How can we display the image here also.

10. In Functions.php of Child theme, used custom Snippets to ADD as well as a Snippet to SAVE custom product fields for Products on “Edit Products” > Product Data section.
https://i2.paste.pics/FFPQC.png
In short, a Snippet to ADD and SAVE MPN field (a Global Product Identifier, like GTIN, UPC)

And then a Snippet to Display the MPN Value in Frontend also (Main product page), as can be seen here.
https://i2.paste.pics/FFPQ3.png

It seems, all goes correctly and works fine and showing on the product page as well.
The only thing is that the Value is showing at the very bottom of the Product tabs, Rather than Inside of Additional Info tab.
https://i2.paste.pics/FFPU0.png

I think, I am just missing something. Can you please suggest,
How can we display this MPN field with Value, inside of the Add. Info tab
And with the Prefix Word as “MPN” also, so as to read it like- MPN: “Value”
(currently, only Value is showing)

10.b. If you have some other Refine code, then, would appreciate, if you could please share that. (You can check the existing one from functions.php of the Child theme.)

PS: I want to add, just in order to get rid of Google warning messages for missing Global Product Identifier (like GTIN, UPC, MPN), as well as missing Brand

10.c. Hence, also wanted to know, are you or Woodmart team planning to Add such options in the coming update to get rid of such Warnings from Google. Regarding missing of Global Identifier, Aggregate Reviews, Brands

Regards

• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.

[Luke Nielsen]

Hello,

9. I have edited the custom code above, now it must show an icon for the “My Account” link too.

https://gyazo.com/e69f065bc47f94714ac8b629ec07d386

10. Please, check this custom code.

if ( ! function_exists('wd_display_product_attributes') ) {
    function wd_display_product_attributes( $product_attributes, $product ) {

        if ( $product->is_type('simple' ) ) {
            global $post;
            $get_mpn = get_post_meta($post->ID, '_mpn', true);

            $product_attributes[ 'mpn-field mpn-field-single' ] = array(
                'label' => __('MPN', 'woocommerce'),
                'value' => $get_mpn,
            );
        }

        return $product_attributes;
    }

    add_filter('woocommerce_display_product_attributes', 'wd_display_product_attributes', 10, 2);
}

10c. So far we don’t have such plans.

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.

Hello Luke,

9. Thanks for updating the previous code. That worked 🙂

10. Yes, this worked. Shows inside Add. Info tab, as well as with Prefix term MPN
Perfect, Much thanks.

10.a. However, one thing. After updating the code, I tested Live URL (after few hours), with Google Rich Results below-
https://search.google.com/test/rich-results/result/r%2Fproduct?id=tG4nggkhnZIu2DJvTprFMA

Product URL having MPN- https://bit.ly/32DUduc

And found that it still shows Warning for Missing Global Identifier. Even though we managed to Add (at backend), Save (in database) and Display (at frontend) MPN and its Value.
https://i2.paste.pics/FG9GC.png

Similarly, Google’s Schema Mark Up Validator did not catch MPN field. However reading the Brand (Woodmart’s) and its Value, from same product URL –
URL – https://bit.ly/3JgUALV

Probably something is missing from, or for the MPN field, in the Snippet code.
Like, it is showing @Type for Brand, and probably there might be no such thing for MPN. Hence, Google might not be catching or reading it. As can be seen from below-
https://i2.paste.pics/FG9GX.png

Can you please check and suggest.
By looking at the existing equivalent code for Brand (Woodmart’s feature), and suggest what we need to adjust in the snippet code for MPN. So as to get it read by Google Rich Results.

Or probably something else might be missing. Our snippet code is still there in functions.php of Child theme

Regards

[Luke Nielsen]

Hello,

10. I have remastered the code above (https://prnt.sc/24tantc) for showing the “MPN” field more correctly in the “Additional” tab.

https://prnt.sc/24t8z4l

10a. As for the issue in the Google validator, please check how it works with the default WordPress theme to understand is it our theme issue or not.

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.

[harshwe]

Hello Luke,

1. You suggested the code earlier to display SVG or custom image before Titles of product tabs (on Single product page) in response post – 340275
But that works only on Accordion style. Can you please suggest, similarly what CSS will work if we choose “Tabs” style
Please share the CSS for all the Tabs

1.e. As per below screenshot, how can we Add Background color on Titles of Tab names (on Single product page). With different BG color on Mouse-Hover, and BG color for Active and Non-Active Tabs. As well as Padding (6, 10px), and Border-Radius 3px

https://i2.paste.pics/FHQ56.png
Similarly, color for text (tab Titles), Active text color, Mouse-hover Text color

PS: We will change the color later-on, according to our needs

10.

I have remastered the code above (https://prnt.sc/24tantc) for showing the “MPN”…

That is really wonderful. Glad to find, that you yourself corrected it and make it appear the same, and in Uniformity. That looks aligned and matched with other fields. Thank you 🙂

10.a. Regarding Google Rich Test and Validator –

I didn’t mean by, that, it not working on Woodmart theme, or theme related issue. (I have not checked with other ones, so far)
I just wanted to request you, if you could please take a further look and suggest accordingly. Possibly, there could be something missing in the snippet code that we have added for MPN.

Because, from above screenshots (and this one – https://i2.paste.pics/FG9GX.png), it can be seen that, in Google Validator, the Brand is being correctly read by Google. Which is Woodmart’s own feature.
And it shows @type also while Google reads it. Similarly @Type is showing for SKU and other fields too in the Validator.
Probably, this could be the reason. Or MPN is not getting read the same way, as it is being read by Google for others (like Brand).

Or probably something else might be missing.

Would appreciate, if you could please try to compare something with the code that is written for “Brand” and to replicate the same with the code for MPN.

May be you can get some fair idea and point in the direction.
And can further suggest.

Regards

• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.

[Luke Nielsen]

Hello,

1. Here is a code for displaying icons for the tabs.

.tabs-layout-tabs .description_tab a:before ,
.tabs-layout-tabs .reviews_tab a:before,
.tabs-layout-tabs .wd_additional_tab_tab a:before,
.tabs-layout-tabs .additional_information_tab a:before,
.tabs-layout-tabs .wd_custom_tab_tab a:before {
    display: inline-block;
    background-size: 15px 15px;
    height: 15px;
    width: 15px;
}

.tabs-layout-tabs .description_tab a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
}

.tabs-layout-tabs .reviews_tab a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
}

.tabs-layout-tabs .wd_additional_tab_tab a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
}

.tabs-layout-tabs .additional_information_tab a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
}

.tabs-layout-tabs .wd_custom_tab_tab a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/08/wd-pointer.svg');
}

https://gyazo.com/b9cda4f2ec3b92991854718fc297010f

1e.

Tabs styles:

.tabs-layout-tabs .tabs li a {
    padding: 15px 10px;
    color: #fff;
    background-color: #f16b6b;
    border-radius: 5px;
}

Text color on hover:

.tabs-layout-tabs .tabs li a:hover, .tabs-layout-tabs .tabs li a:focus {
    color: yellow;
}

Active color:

.tabs-layout-tabs .tabs li.active a {
    color: #fff;
    background-color: #343434;
}

https://gyazo.com/1efb0cae9b5fde2ac4729e20dbae2fa9

10. I didn’t find any missing code in your child theme so if you check this issue on some default theme we will know whether the issue is with our theme or not so it will be easier to find out what the problem is.

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.

[harshwe]

Hello Luke,

1. Thank you for sharing the CSS to display image or icons on Tabs. Seems more arranged and clear code.

1.e. I used the code and Updated colors according to needs. I found that BG color for Non-active tabs is not reflecting correctly. I am using “Black”, but it is still reflecting “Grey” color. Not sure, from where it is picking the Grey color
https://i2.paste.pics/FIE6C.png

We are using below code (Global Custom CSS area) –

.tabs-layout-tabs .tabs li a {
    padding: 6px 10px;
    color: #fff;
    background-color: #000;
    border-radius: 5px;
		width: 100%;
}
.tabs-layout-tabs .tabs li.active a {
    color: #f16b6b;
    background-color: #000;
}
.tabs-layout-tabs .tabs li a:hover, .tabs-layout-tabs .tabs li a:focus {
    color: #f16b6b;
}

And this code do not reflect and shows colored tabs when we switch to mobile. Even though we added it in Global CSS. Can you please try to replicate at your end.
How can we resolve this, so as to make it look similar even in mobile devices too.
PS: May be, probably they automatically switch to Accordion style in mobile. Is it so.

Also, how can I make BG color of All tabs with equal Width (on Single product page). So as to make them look uniform. Irrespective of Title Text length.

Just like we set on below page (in Draft)
https://i2.paste.pics/FIDMJ.png
Here it displays BG color of equal width. Even when the Title length varies

10. I tested on Default 20-21 theme by adding custom Snippet code in the functions.php file.
The Rich results shows same warning for MPN.
However, strange or interesting to see, this time it shows warning for the Brands also – https://i2.paste.pics/FIDTP.png

Even though it is displaying Brand on the Product page (as already defined in Products > attributes), as seen here-
https://i2.paste.pics/FIDUV.png

So point is, it looks like Woodmart’s Developer have added some sort of proper code for “Brands” (in their Theme), and for the same reason, Google Rich Results are not showing Warning of “Missing Brands”

That is what I pointed out earlier and requested you to look for the Code for Brands (by Woodmart), and try to compare and replicate with that of MPN code. Probably, something is missing with the MPN and its code.
I know, you can help to point it out and suggest further, so as to get rid of this Warning for MPN also.

If you could please ask and consult the Developer team also, that would be very much appreciable.

Regards

• This reply was modified 3 years ago by harshwe.

[Luke Nielsen]

Hello,

1e. In order to get rid of the gray color on the non-active tabs, you should add in the .tabs-layout-tabs .tabs li a selector the “opacity: 1;” line.

https://monosnap.com/file/8OdtBuHXTYKLbrsNjVfCrKympgkLwL

https://gyazo.com/b9c17318a69ad931d12785d62765ad37

Color of the non-hover accordion title:

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title {
    color: blue;
}

https://gyazo.com/55564c36c2077585a839d4ed1ba61977

Background color of the non-active accordion title:

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title {
    background-color: #e5e3e3;
}

Background color of the active accordion title:

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title.active{
    background-color: #ede0e057;
}

https://gyazo.com/d3c4c1e0b625212dbb0ab3b5acb5f78e

Color of the hover accordion title:

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title:hover {
    color: #f16b6b;
}

To be able to make the tab’s with equal width, try to use the below CSS code, please.

.single-product .tabs-layout-tabs .tabs li {
    width: 100% ;
    max-width: 160px ;
}

https://gyazo.com/b4fbafe7415284e8113163ebc98ca81b

10. It will be better if you contact the WooCommerce support team because it’s their functionality (MPN etc.). But also, I will consult with the team.

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.
• This reply was modified 3 years ago by Luke Nielsen.
• This reply was modified 3 years ago by Luke Nielsen.

[harshwe]

Hello Luke,

1. This worked. Thank you. I updated it to 0.78, as per current needs.

1.e. In below code-
.tabs-layout-tabs .tabs li a:hover, .tabs-layout-tabs .tabs li a:focus
What does a:hover and a:focus separately does here.

Does a:focus means, that it will change color when we switch the tabs using keyboard also, the same way, when we use Mouse-Hover. Hence, both of these needs to have same color. And that is why you shared CSS for both, at once.

1.f. Thanks for sharing CSS for Accordion too. Will try these too.
1.g. Yes, this worked perfectly. I adjusted max-width to 120px, as of now.
Thanks you 🙂

10.

if you contact the WooCommerce support team because it’s their functionality

I wish, if this had been their core functionality. But unfortunately not. Also, not coming out-of-the-box too.

I asked you, because for “Brands” Google Rich results is not giving any Warning, when using Woodmart’s in-built Brands option. Hence, thought you can guide the correct way, and can help to get rid of the warning for MPN. As the code, that we are using seems correct, the only thing was not getting read by Google as a Rich result for Global Identifier – MPN.

But also, I will consult with the team.

Thank you so much. I wish you and team could surely bring up some solution and help on this.
Wish, team could bring this as an In-built functionality, like few other themes are having.

Regards

• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.

Hello,

1e. The :focus represents an element that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

Here is an example when the :hover and :focus have different colors for the tabs.

https://monosnap.com/file/c77NQGADK5TeXy9S9XXJlLTIqeoXNT

1g. You are welcome!

Kind Regards

[harshwe]

Hello Luke,

1.e. Glad you clarified it with details. Wonderful explanation with Video.
Thank you 🙂

11. On a Single product page, there are 4 Related Products that are visible At-a-time.
How can we show 6 products instead of 4, At-a-time.
So that, the size of Thumbnail images also gets accommodated accordingly by being smaller in size comparatively.

12. Currently, it is approximately 50-50% area for Images and Products Summary areas, on Single product page. With the Product image width already set to Medium. And as shown below-

https://i2.paste.pics/FJQXI.png

How can we have 45% area for Images and 55% for Summary area on Single product page, with same Medium option for Product image width, to be adjusted accordingly.

Regards

• This reply was modified 3 years ago by harshwe.
• This reply was modified 3 years ago by harshwe.

Hello,

1e. You are welcome!

11. You can change the number of related products by means of the “Related product columns” option that is situated in Theme Settings -> Single Product -> Related Products.

https://monosnap.com/file/QDVSiLeRbGvuOaYvs2Qv2g6QlOQTuy

12. Here is a custom CSS for changing the width of the summary area and image.

.single-product .product-image-summary-inner .product-images {
    flex: 0 0 45%;
    max-width: 45%;
}

.single-product .product-image-summary-inner .entry-summary {
    flex: 0 0 55%;
    max-width: 55%;
}

Kind Regards

[harshwe]

Hello,

11. Oh. I Missed that. It was as easy, from within the settings itself
Thank you 🙂

12.

Here is a custom CSS for changing the width..

It worked. But unfortunately, that breaks in mobile. Instead of wrapping “Summary” down (which was default in Mobile), it is showing Side-by-side, in mobile also. (in that same ratio)

In order to resolve this, Should I enter this custom CSS in the CSS area that is only for Desktop. Or something else.

12.a. Just wanted to know, by default, is Theme using 50-50% width for both (image and summary area). Or something other.
Means, some other technique or rule, for Single product page.
Can you please suggest

I am asking, in order to make sure, that we are not breaking the default (hard-coded) rule or coding, width of image-is-to-summary area, by using that custom CSS.
But, just adjusting the width (with that custom CSS), by following the same principle or code.

Regards

• This reply was modified 3 years ago by harshwe.

Hello,

12. Of course, you should enter it into the “Custom CSS for desktop” area.

12a. The theme uses 50-50% width for both by default. Move the code to the Desktop area and all will be fine.

Kind Regards

[Author]

Posts