Shop page missing bredcrumbs and filters on the shop page

[alexpodeanu]

Hi there. I am setting up my new shop website using the PRO theme and the shop page looks to be very empty. I would like to have the breadcrumbs, filters at least?

Also, I would like to know how could I add the page title, maybe some other text? Is there a way to do it through PRO?

*I am using the child theme

[prakash_s]

Hello Alex,

Thanks for writing to us

There is a CSS code that hides the filter of the shop page. You need to remove this custom CSS code from Theme options -> CSS.

Please have a look at the given screenshot

As you use Pro Header Builder you need to add Breadcrumbs element in the header. I copied the previous header and renamed to Shop Shop besoph_header. Then I assigned this Shop besoph_header to the shop page.

Please check screenshots.

Thanks

[alexpodeanu]

Thanks for taking the time to look at my problem!

I will have a look for all the hidden elements, thanks.

On the same note, I am struggling with the custom CSS and just realised that the theme doesn’t take the custom FONT FAMILY to the shop and product pages?

I’ve found all the classes in a different thread so I’ve used them as guidance but it doesn’t seem to apply the font family even it applies the property (inspect element). I want to have my titles on listings and product page with Clicker font-family as you can see below:

.    woocommerce li.product .entry-header h3 {
font-family: "Clicker Script",handwriting;}
.archive.woocommerce .price {
font-family: "Clicker Script",handwriting;}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: "Clicker Script",handwriting;}

/* Product details page page */
.woocommerce .entry-title {
font-family: "Clicker Script",handwriting;
}
.woocommerce .woocommerce-product-details__short-description {
font-family: "Clicker Script",handwriting;
}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: "Clicker Script",handwriting;
}

Aren’t the fonts added for all the pages? Or do I have to activate them from setting for the product pages?

Thanks

[ruenel]

Hey Alex,

Thank you for the very detailed clarifications. I have looked into your custom CSS code and also compared it to your page’s source code. It appears that the Clicker Script font were not loaded on the page. This is the reason why it does not work. To resolve this, you will have to load the Google Font first via CSS and then apply it to your code.

Kindly open this link: https://fonts.google.com/specimen/Clicker+Script?query=clicker&sidebar.open=true&selection.family=Clicker+Script

You will find this:

The instruction mentioned that you need to embed a code first before you can use the CSS rule. Therefore, your final code will be:

@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap');

.woocommerce li.product .entry-header h3,
.archive.woocommerce .price,
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
	font-family: 'Clicker Script', cursive;
}

/* Product details page page */
.woocommerce .entry-title,
.woocommerce .woocommerce-product-details__short-description,
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
	font-family: 'Clicker Script', cursive;
}

Since you have the same font attribute, I have modified the code into fewer lines. Be advised that this is just an example code to point you in the right direction. You will have to maintain this code whenever there are any theme and plugin updates.

Best Regards.

[alexpodeanu]

HI ruenel,

Thanks so much for doing this! I will go and apply but because I’ve added the font to the theme PRO font manager I thought it will go on every page? I can’t see any error with the other font on these pages - Montserrat.

Just to add the to above: I went and added the lines you have provided (curios enough, the font through the PRO fonts manager has the handwriting option but this one doesn’t… ? Plus, the examples on Google’s website are as it should while on the pages where I’ve had to use @import due to the problem with the font-family it’s just .cursive.)

I have added 2 screenshots for you to see the differences:

• this is the font I want to have on the Shop and Product pages
  
  

And this is what I get:

[tristup]

Hi Alex,

As my colleague explained that you need to import the font family before you use it in any element. I found that in the Home page the font has included, whereas in Single Product page does not include the font.
And that is why the output is looking different, even though the debugger shows the font as the attribute value.
The Home page source screenshot shows that it was able to load the font.

Hopefully, this will resolve by adding the font using @import(.....) above the CSS code.
Thanks

[alexpodeanu]

Hi,
Thanks for replying.

Well for the homepage I didn’t put it manually, I’ve used the font manager:

I am just trying to understand how come the homepage and some other pages has it and the products/shop not?
How could I make sure is across, being done through PRO.

Thanks

[tristup]

Hi Alex,

The Font Manager includes the fonts exclusively for our theme files, and it does not override the default style for WooCommerce. To get the same, you need to import it manually as described before.

Thanks

[alexpodeanu]

Thanks, I have updated.

Problem solved.

[prakash_s]

Hello Alex,

Glad that we are able to help you.

Have a great day!
Thanks