Yoast Breadcrumbs Typography Settings

I installed the Yoast SEO plug-in and enabled the Breadcrumbs function. I want to set the Yoast Breadcrumbs font size and Transform. How do I set it up?

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

But I don’t know how to insert CSS classes for Yoast Breadcrumbs, and your tutorial doesn’t explain it in detail
How to customize Yoast Breadcrumbs as a CSS class?

Hello,

Can you please share the product page URL so I will check and give you a possible solution?

Best Regards

Below is the Breadcrumbs display effect of my website, but I think this display effect is not as good-looking as the default setting of your theme. How can I set it to have the same Breadcrumbs display effect as your theme’s default setting, but still use Yoast Breadcrumbs.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.single-product :is(.breadcrumbs,.yoast-breadcrumb) :is(a,span) {
    text-transform: capitalize;
    font-weight: 400 !important;
    font-size: 15px !important;
}

Best Regards

I added the CSS code as you suggested, but it had no effect

I still have a question. I use Html Block to make Mega Menu, but when I click on the category image on the mobile phone, the menu will automatically close. When I click on the menu category on the computer, the Html Block of the menu will not close.

Attachments:

You must be logged in to view attached files.

Hello,

1. The custom CSS code is working on the site: https://ibb.co/Fq7b5Xv

2. Sorry, I did not understand your issue, can you please explain the issue with the help of the small video.

Best Regards.

But you can see that it doesn’t work in the product category diagram.

Attachments:

You must be logged in to view attached files.

https://streamable.com/fjr884
In this video, you can see that after I clicked the menu, the product page jumped, but the menu was still expanded and blocked the refresh of the product, making it impossible to confirm whether the display of the product was refreshed.

Hello,

1. The custom CSS is working fine at my end and showing fine, please see the screenshot: https://ibb.co/sHRCFNx

2. The video link has not found any video: https://ibb.co/8zPvVsW

Best Regards.

1. Because I had to wait too long for a reply, I turned off the Yoast Breadcrumbs feature and used the theme’s default Breadcrumbs feature.
2. The video link is only valid for 2 days. The reply time has expired, causing the link to become invalid. I have re-uploaded it.
https://streamable.com/3mgyj6

Hello,

1. So do you need more help with this issue or not?

2. Please add the below code to the child theme function.php file.

add_filter('woodmart_ajax_links', function () {
	return '.wd-nav-product-cat a, .wd-page-wrapper .widget_product_categories a, .widget_layered_nav_filters a, .woocommerce-widget-layered-nav a, .filters-area:not(.custom-content) a, body.post-type-archive-product:not(.woocommerce-account) .woocommerce-pagination a, body.tax-product_cat:not(.woocommerce-account) .woocommerce-pagination a, .wd-shop-tools a:not([rel="v:url"]), .woodmart-woocommerce-layered-nav a, .woodmart-price-filter a, .wd-clear-filters a, .woodmart-woocommerce-sort-by a, .woocommerce-widget-layered-nav-list a, .wd-widget-stock-status a, .widget_nav_mega_menu a, .wd-products-shop-view a, .wd-products-per-page a, body[class*="tax-pa_"] .woocommerce-pagination a';
});

Best Regards.

After I added the code you sent me, I found that there is no Ajax function, which causes the website to load very slowly when clicking on the category. Is there any other solution?

Hello,

Your initial issue was related to the fact that, while on the shop page, clicking on a category in the dropdown triggered AJAX. Since dropdowns on desktops operate on mouse hover, they cannot be hidden during AJAX execution because, at the moment of clicking, your cursor is still within the dropdown’s boundaries. With the settings you have chosen on your site, the only solution to resolve this issue is to disable AJAX for the category element when it is located in dropdowns, which was already addressed in the previous response.

Best Regards.

So what you mean is that only disabling Ajax can solve this problem? So is there any other way to create a menu that can achieve the same menu design effect, but can use Ajax normally and close the menu option after clicking the link? I checked your Mega Menu options and found that there is no way to achieve my current menu design effect.

Hello,

Unfortunately, there is no alternative solution in this case, as the dropdown content is not designed to accommodate tools for filtering content on the current page. Dropdowns are intended to contain only links to other pages. Therefore, the only solution in this situation is to disable AJAX on the shop page for categories located in the dropdowns. This ensures that clicking on them on the shop page works the same way as on all other pages not related to the shop page.

Best Regards.

[Author]

Posts