Hi,

This is AJ the theme author.

There isn’t a built-in Customizer setting for this, but you can use a little Custom CSS.

Example CSS:

.woocommerce .product .summary .price { font-size: 16px; }

If you want to use a theme’s preset font size – https://totalwptheme.com/docs/preset-font-sizes/ – the code would look like this:

.woocommerce .product .summary .price { font-size: var(--wpex-text-xl); }

Where “lg” is the font size prefix (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl)

You can also create a custom template for your products if you want to have more control over the design – https://totalwptheme.com/docs/woocommerce-single-product-template/ – when you insert the theme’s WooCommerce Part element to display the product price you can modify the typography.

- AJ

Thank you for the quick answer. Got it.

Hi James,

I think the theme’s [topbar_item] shortcode has always worked like this. But I could be mis-remembering. If you want you can use this CSS so that it’s not a flex container:

.top-bar-item__inner {
    display: inline-block;
}

I will have a look back at old versions to see when it changed and if I commented in the code as to why I made the tweak.

- AJ

Worked great – thanks.

AJ, this ended up being an issue with a 3rd party plugin. All good now.

Glad it was an easy fix!

Any chance you can tell me which plugin? This way I can test it locally and suggest a fix to the plugin developers.

- AJ

AJ, The plugin causing the issue was WP Migrate Lite by WP Engine.

Hi,

This is AJ the theme author.

Can you please provide the URL so I can see what you are trying to do?

The CSS doesn’t make much sense, because if you want your image to be 100% there is no point in adding a left/right margin of auto because it’s not going to actually do anything. Using a left/right auto margin is intended to center an element, but if the element is displayed at 100% it’s technically already centered.

- AJ

I used the WP backend to upload the new theme and overwrite the old one, and it worked.Thank you very much.

Awesome!

ps; I am releasing an update soon, so make sure your license is active under Theme Panel > Theme License so you can easily update from now right in the WP admin.

This is AJ the theme author.

Making your images the same size is very simple via either cropping or aspect ratios (recommended). I don’t know how your homepage was created so there is no way for me to provide you with the exact instructions. Can you share the URL in question?

Assuming your homepage is just a blog then under Theme Panel > Image Sizes you can set an aspect ratio for your images under the Blog tab.

Setting an aspect ratio will ensure your images are all the same height and width.

More info on image sizes in the docs here: https://totalwptheme.com/docs/define-your-image-sizes/

You could alternatively crop the images, but this isn’t generally recommended anymore.

And you don’t have the Aspect Ratio options then your theme is outdated: https://totalwptheme.com/docs/changelog/

If this doesn’t help please share the URL so I can see how your homepage is created. Thanks!

- AJ

Hi,

This is AJ the theme author.

It sounds like you need to change the background image to “Cover” like this: https://a.cl.ly/DOuLNQPQ

In CSS a cover style background will make it so your image always takes up the full height and width of the container. Of course this can cause some of the image to overflow so it may not all be visible on smaller screens. So often you want to make sure you use an image where that doesn’t matter.

For example if you set a background image that has a bunch of people some may get “cut” off on smaller screen sizes.

Let me know if you have any followup questions or if there is anything else I can assist with!

- AJ

Got it, thank you so much. It did work perfectly.

Hi Florian,

Font Size Breakpoints:

The theme’s font size breakpoints actually the following:

'tl' => '1024px',
'tp' => '959px',
'pl' => '767px',
'pp' => '479px',

These are actually the same ones used in WPBakery but with minus 1px because WPBakery uses a mobile first approach to their column breaks and the font size media queries work backwards. So the sizes do match up with WPBakery.

As I mentioned they work “backwards”, in other words they use a “max-width” media query. So if you were to set a font size for let’s say the 3rd field it will apply to that browser size and below (I mention because I notice sometimes customers adding the same font size to multiple fields).

Now, you can actually modify these breakpoints if you want via a little custom code:

// Define my total element font size breakpoints.
add_filter( 'vcex_css_breakpoints', function() {
    return [
        'tl' => '1024px',
        'tp' => '959px',
        'pl' => '767px',
        'pp' => '479px',
    ];
} );

But…in Total 6.0 I actually made all the theme’s preset font sizes fluid so they are natively responsive – https://totalwptheme.com/docs/preset-font-sizes/ – and it’s generally best to use these than to define manual font sizes across the site as it will make it harder to manage.

If your font sizes aren’t fluid it’s possible you installed the theme prior to the 6.0 update and if you wanted you can go to Theme Panel > Deprecated filter link and disable “Classic Styles”. Or you can go into the customizer and set your custom preset font sizes to use modern clamp values like such: https://totalwptheme.com/docs/preset-font-sizes/ – And there are many sites you can use to create your own custom fluid font size scale such as – https://www.fluid-type-scale.com/

Menu Button:

Your site is using a custom header with the Horizontal Menu element, this element doesn’t support the menu button classname for various reasons. Generally what I would recommend doing is just adding your button text to the menu and then enabling a button for your Off Canvas menu.

Easiest way to add a button next to the Horizontal Menu is via the Flex Container.

I made a video to show you how you can do this: https://a.cl.ly/nOu4w80P

This gives you way more control because the button element can do much more than a simple menu link. Which is why I opted out of the menu-button class for this newer element.

Reversed Columns:

I agree it can be a bit confusing. I”m not really sure the best way to handle this due to some WPBakery limitations. My thought is that once you know how the feature works, in the future you would enable it before adding any content to the row to begin with and then it’s not a concern.

One thing I want to mention also is that the Feature Box element could also be used to accomplish similar things without having to use WPBakery rows. It will give more flexibility in the spacing between the content and the image as well: https://totalwptheme.com/elements/feature-boxes/

Glad you like the theme! Let me know if you have any followup questions and the theme thrives on feedback. Feel free to share any suggestions!

- AJ

oh ya .. im using syle 3 ..

wish that it will stil have left-aligned text even though the menu items are centered in the row

Gotcha,

This is very easy to do. Here is some example CSS:

.main-navigation-three .main-navigation-ul > .menu-item > a > span {
    text-align: start;
}

Now, this header style also has a fixed height added to the menu items so things may not look very good if not all items have 2 lines.

In which case you may want to also add this CSS:

.main-navigation-three .main-navigation-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-navigation-three .main-navigation-ul > .menu-item > a {
    line-height: 1.5;
    display: flex;
    align-items: center;
}

That will convert the menu into a modern flex container so all the links are vertically aligned.

- AJ

fantastic ! thanks

Ups, sorry!

This website: https://www.llevantmobiliari.es

Hi Jaume,

Ok I see for example this page has the issue: https://www.llevantmobiliari.es/categoria-producto/sillas/sillas-de-comedor/

Are you using the theme’s Post Cards element in a dynamic template for your shop? It seems so…

I did a test locally to try and recreate the issue but it’s working correctly for me: https://a.cl.ly/Blum0OLJ

Is there any child theme code perhaps that is making modifications to the the WordPress queries? Maybe a year ago the theme’s dynamic query worked differently by running an extra query based on the archive shown, but it was optimized to instead use the global $wp_query to prevent extra database hits and allow for code hooking into pre_get_posts to work correctly. It’s possible if you are updating from a very old theme version and your site had some code that was modifying queries that it didn’t break things before but now it does.

That’s pretty much all I can think of…

If you want shoot me an email directly to wpexplorer [at] gmail dot com so we can get this issue fixed up ASAP since it’s a live store. If you send me the logins I can log in and have a look. But I will likely need FTP access so that I can do a print_r() on the page to see what the current query is doing and troubleshoot accordingly. Please use this site to share logins securely: https://onetimesecret.com/

- AJ

Hi,

This is Aj the theme author.

Because it’s a bundled plugin you can not “activate” it in the traditional sense. Plugin updates are provided via the theme – https://totalwptheme.com/docs/update-plugins/

Now, Slider Revolution is a MASSIVE plugin and I actually don’t really recommended it. It’s included with the theme because it’s always been included. But really you shouldn’t be using ANY sliders on modern websites if you can avoid it – https://yoast.com/opinion-on-sliders

That’s why in Total 6.0 I added these notices to the bundled plugins installation page: https://a.cl.ly/L1u2xDKy

To keep your site fast and optimal, for Hero sections it’s best to use static images or video backgrounds. For example:

• Static hero: https://totalwpthemedemo.com/biz/
• Video bg: https://totalwpthemedemo.com/consultative/ (this is a new demo to be released later today)

Let me know if you have any followup questions or concerns!

- AJ

Hi,

• The Contact Form 7 plugin should be inheriting the theme’s button colors and styles as defined in the theme or your custom styles defined in the Customizer – https://totalwptheme.com/docs/button-colors/ – if you want to target the plugin’s button separately then you will need to use custom CSS. Example:

input.wpcf7-submit { background: red; }

• If you have any code in your child theme you will need to move it first. Any custom CSS can be moved to the Theme Panel > Custom CSS page and any PHP can be moved into a snippets plugin. Then you will need to copy your settings from Theme Panel > Import Export. Then you can switch to the parent theme, then import the settings you copied previously. There isn’t going to be any speed difference switching though, no real benefit to do so. So if it ain’t broke, don’t fix it.

- AJ

i use this function add_menu_item_description($item_output, $item, $depth, $args) { // تحقق من وجود وصف (description) للإدخال if ($item->description) { // إضافة الوصف أسفل العنصر $item_output .= ‘ ’ . esc_html($item->description) . ‘ ’; } return $item_output; } add_filter(‘walker_nav_menu_start_el’, ‘add_menu_item_description’, 10, 4);

Hi,

Yes, that code should work I have a snippet here as well: https://totalwptheme.com/docs/snippets/menu-descriptions/

I want to mention this for anyone else reading this…

The default theme header menu doesn’t natively support descriptions, but if you use the Header Builder and the theme’s new Horizontal menu element it does. Example: https://totalwptheme.com/elements/horizontal-menu/

Here is a guide for using the Header Builder: https://totalwptheme.com/docs/header-builder/

And you can view the theme’s header patterns as well, which can be used to quickly create your header: https://totalwptheme.com/patterns/header/

- AJ

This of course shouldn’t be happening. It should look like this: https://a.cl.ly/KouRGElO

WordPress updated their Customizer scripts in 6.7 so the issue could just be cached related. I would recommend you first try clearing your browser cache.

If that doesn’t work it could be a plugin conflict. I know for a fact this plugin causes the issue: https://wordpress.org/support/topic/customizer-styles-in-wordpress-6-7/

But you don’t seem to be using that plugin from what I can tell.

- AJ

That’s correct, we’re not using that particular plugin. I did find several posts about this exact problem, so it seems like a common issue in WordPress 6.7.1. This page https://wordpress.org/support/topic/customizer-sidebar-accordion-buttons-100-height-in-6-7/page/2/ suggests adding the following to function.php. I did, and it worked!

Is your customizer showing the icons next to your tabs like in my video? Just want to make sure, because I your previous screenshot it didn’t seem like it.

It definitely sounds like some plugin on the site is messing with the WP button styles. This extra CSS shouldn’t be needed. Of course it’s not a huge deal to add the extra code.

- AJ

Hi,

This is Added via a dynamic template part created under Theme Panel > Dynamic Templates and then inserted into the field at Appearance > Customize > Header > General > Side Content. See here: https://a.cl.ly/4guLYlAq

- AJ

It works, thank you.

Hi James,

Did you delete the URL? I’m getting a 404 page.

Based on the screenshot I see you’ve inserted an image slider. So it would be a bit complex to “stretch” the slider to fill the column. It’s much easier if you are just adding an image background to the column itself (generally this is how it would be done). I wrote a little doc for this: https://totalwptheme.com/docs/how-to-add-a-stretched-image-inside-a-wpbakery-column/

If you want a slider to stretch (or any other element) you need to make your columns equal height then add CSS to the site to stretch the WPBakery wrapper inside the column, around the slider, the slider itself and the images inside the slider.

My personal advice is to not have a slider. People won’t sit there and click through photos (they just wont) and so you are slowing down the site by introducing extra images, slider CSS, slider JS, jQuery and JS processes. Having a single image next to the content will keep the site loading fast which is what the visitor really wants. If you want to have photos for the visitor to look through that’s what the gallery page is for.

- AJ

Hi James,

This is a bug with your specific setup. I am adding a fix for the upcoming 6.0.2 patch which I plan to release most likely tomorrow.

The correct CSS fix would be this:

@media only screen and (max-width: 1160px) {
    #site-logo.header-five-logo {
        justify-content: center;
    }
}

Thank you for reporting this!

- AJ

ps: If you want you can patch your theme right now, it’s very simple. You just need to edit the file at Total/inc/header/logo.php locate line 582 which looks like this:

case 'three':
case 'four':
    $classes[] = 'wpex-text-center';
    classes[] = 'wpex-justify-center';
break;

And include ‘five’ in the header styles like this:

case 'three':
case 'four':
case 'five':
    $classes[] = 'wpex-text-center';
    classes[] = 'wpex-justify-center';
break;

End result: https://a.cl.ly/xQukljew

Thanks AJ, I used the CSS for now, works great.

It’s possible you have the Icon option disabled under Screen Options: https://totalwptheme.com/docs/wp-content/uploads/sites/51/total-menu-icon-enable-screen-options-scaled.webp

If not, then maybe a 3rd party plugin is breaking things. If your site is updated to the latest version of the theme you should see these new settings.

- AJ

ps: You can still add menu icons the same way as before using the theme icon shortcode, but of course using the new feature is much easier and it also ensures that the the theme adds proper classes to your icons for spacing.

Hmm, I don’t see that under my screen options. I just used the shortcode method. Thanks AJ!

Maybe your theme is outdated: https://totalwptheme.com/docs/changelog/

- AJ

Hi,

This is AJ the theme author.

I actually had to remove this checkbox because it technically violates the licensing terms here on Envato. But you can still enable the theme on as many development sites as you need to. You just simply can’t “activate it”.

The way Total is coded, NOTHING is hidden behind the license. The theme license simply enables automatic downloads and access to support for the domain. So you can still use it freely on development/staging sites without limitations. And if you really need automatic updates for those sites you can just install the Envato Market plugin on the dev server – https://www.wpexplorer.com/envato-market-plugin-guide/

- AJ

Hi,

This is AJ the theme author.

This is actually on purpose, because dropdown menus require excess code and mobile menu support. So I don’t enable this for the Top Bar menu area to keep things slim.

Now, you have a couple options:

1. This is the more time consuming option, but I want to let you know incase you didn’t know this ability exists. You can use the function at Theme Panel > Header Builder create your entire header using your page builder of choice (WPBakery/Elementor). So you would disable the Top Bar in the Customizer and insert anything you want for your site header via the Header builder.

This way, you can add infinite dropdown menus via the theme’s Horizontal Menu and/or Off-Canvas Menu elements. I don’t have any header patterns with double menus, but you can use a header pattern to get started quickly with your custom header to see how I set things up:

• https://totalwptheme.com/docs/section-templates/
• https://totalwptheme.com/patterns/header/

This method gives you the most freedom to design a truly unique header.

2. You can continue using the default site header and top bar. But create a new template part for your top bar menu. Here is a video showing how to do that: https://a.cl.ly/eDubzg5A

- AJ

AJ, Thank you for the reply. I will try the solutions that you have mentioned.

Love the Total Theme.