Hi,

If you want an AJAX filter than you would want to use the advanced ajax function – https://totalwptheme.com/docs/snippets/advanced-ajax-filter-example/

To create your “accordion” you would do just need to add the proper HTML. I assume if you want to display parents that can be expanded to show children you are probably going to be adding this to a sidebar so it’s vertical and you probably don’t want the parent categories filterable. So the best way is using the modern html details element – https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

Here is a basic example based on my snippet (I actually had chatGPT write this for me):

function woo_cards_product_filter_shortcode( $atts ) {
    if ( ! function_exists( 'totalthemecore_call_non_static' ) ) {
        return;
    }

    // Load AJAX filter scripts
    totalthemecore_call_non_static( 'Vcex\Ajax', 'enqueue_scripts' );

    // Get target grid ID from shortcode attribute
    $target = isset( $atts['target'] ) ? $atts['target'] : '';

    if ( empty( $target ) ) {
        return;
    }

    // Get all parent categories in 'product_cat' taxonomy
    $parent_terms = get_terms( [
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'     => 0,
    ] );

    ob_start();
    ?>

    <div class="woo-cards-product-filter" data-vcex-ajax-filter="1" data-vcex-ajax-filter-target="<?php echo esc_attr( str_replace( '#', '', $target ) ); ?>" data-vcex-ajax-filter-multiple="0">

        <?php if ( ! empty( $parent_terms ) && ! is_wp_error( $parent_terms ) ) : ?>
            <?php foreach ( $parent_terms as $parent ) :

                // Get child terms
                $child_terms = get_terms( [
                    'taxonomy'   => 'product_cat',
                    'hide_empty' => false,
                    'parent'     => $parent->term_id,
                ] );

                if ( empty( $child_terms ) || is_wp_error( $child_terms ) ) {
                    continue;
                }
                ?>

                <details class="woo-filter-group">
                    <summary><?php echo esc_html( $parent->name ); ?></summary>
                    <ul class="wpex-mt-5 wpex-ml-10 wpex-list-none">
                        <?php foreach ( $child_terms as $child ) : ?>
                            <li><a href="#" class="theme-txt-link" data-vcex-type="product_cat" data-vcex-value="<?php echo esc_attr( $child->term_id ); ?>">
                                <?php echo esc_html( $child->name ); ?>
                            </a></li>
                        <?php endforeach; ?>
                    </ul>
                </details>

            <?php endforeach; ?>
        <?php endif; ?>

        <!-- Reset Button -->
        <button class="theme-button" data-vcex-type="reset">Reset Filter</button>

    </div>

    <?php
    return ob_get_clean();
}
add_shortcode( 'woo_cards_product_filter', 'woo_cards_product_filter_shortcode' );

Usage:

[woo_cards_product_filter target="YOUR_GRID_ID"]

Sample video: https://a.cl.ly/Kou5lQrJ

- AJ

ps: I think using the details element is better, but you could instead modify this code to use the theme’s vcex_toggle_group and vcex_toggle_shortcodes for the output. Really you can anything, since it’s just basic HTML – the important thing for the filters to work is the data attributes.

ps: I edited the snippet above, there was an extra ”#” in data-vcex-ajax-filter-target which shouldn’t be there – a mistake by chatGPT that I didn’t catch.

Hi,

This is AJ the theme author.

So first of all, no theme should ever have an AMP version of the theme, this is plugin territory. You really should use a plugin to add AMP support to your site and any plugin will work with any theme.

Now, AMP is quite old school and not really recommended anymore. There are several reasons for this and I can post them here if you’d like. But generally speaking, AMP is not recommended by top experts anymore. It’s more important to focus on responsive design & Core Web Vitals (which will mostly be dependent on your hosting).

If anything, what you would want to consider is using a plugin to convert your site to a progressive web app – these plugins will also work with any theme, but could be limited by your server. Also, depending on the site it could be completely useless. For your site specifically, it wouldn’t make any sense to set it up as a PWA (or even have an AMP version for that matter).

- AJ

Hi,

You’ll need to be a bit more specific what you mean by “advanced animations and page styling options” – it’s possible what you are looking for is already included in the theme. These are 2 very different things and specifically when it comes to “page styling options” I’m confused because you can literally style anything in the theme and create templates for anything section of the site, so you have full control over the page styling.

Regarding animations specifically, many site animations are now considered somewhat “old school” (not modern). In fact, most modern websites tend to avoid animations, as they often rely on extra scripts that can slow down performance, negatively impact SEO (depending on how they’re implemented), and create accessibility issues for some users.

That said, some animations could be ok such as micro-interactions or subtle transitions. Things that may be possible already in the theme.

Feel free to email me directly to wpexplorer [at] gmail dot com if you wanted to share some examples from other sites/themes of what you are referring to.

- AJ

ps: Total is also fully compatible with Elementor and Elementor Pro – older customers that have been using WPBakery for a long time may not be aware of this. And Elementor does have not only many built-in animation functions (in the pro version) but there are also many free and premium add-ons for Elementor you can use for added animations. But again, depending on what you want to do, it may not be ideal to do so.

Hi James,

You can write your own shortcode for this, but you can also just use the Post Cards element, use the “Post Content” card style and under the Query tab you can use the ‘Query Specific Posts’ field to define the post to display.

- AJ

Hi,

This demo has a custom logo text which is defined and can be changed under Appearance > Customize > Header > Logo > Logo Text.

The reason why I used this specific field for this demo (rather then having it automatically pull the site name) is because I wanted the dot between the words. If you just leave that field blank it will pull your site title as defined in WordPress under Settings > General.

- AJ

Hi AJ, I do give the specific field with the Logo Text, how can I give h1 tag to the Logo text? Thank you.

HI,

It’s very bad for SEO to set your logo to an h1 heading. I can give you some custom code you can use to do this, but I would not recommend it at all – this will hurt you more then help.

Now, this demo itself doesn’t have an h1 on the homepage, so you may want to add one. Simply edit the homepage with the page builder and insert the theme’s Heading element which you can set to an H1 and give it a good h1 based on your website, generally this would not be the same as your logo.

I didn’t add one to the demo as it wouldn’t look very good and it’s not usually needed for most sites, of course it can help with SEO to add one.

- AJ

Hi,

This demo has a custom logo text which is defined and can be changed under Appearance > Customize > Header > Logo > Logo Text.

The reason why I used this specific field for this demo (rather then having it automatically pull the site name) is because I wanted the dot between the words. If you just leave that field blank it will pull your site title as defined in WordPress under Settings > General.

- AJ

Hi,

Can you share the URL so I can have a look?

From what it sounds like, you have the posts set to display the full post content on the archives and the Ultimate Member plugin displays a notice when the post content is rendered to display a login message if the user is not logged in, but it doesn’t have the proper checks for when posts are loaded via AJAX.

Have you already tried contacting the plugin developers to see if there is a built-in setting or fix for this?

Now, of course one way to easily “fix” this would be to only display excerpts on the archives so the user needs to click a button to go to the full post where they will see the login notice. Generally you wouldn’t want to display the full post content on the archive anyway – of course this depends on the site and context.

Now, if all your posts were restricted to members then it would be very easy to setup a custom template where if the user wasn’t logged in they would see a notice otherwise they would see the posts. This could be done via a dynamic template – https://totalwptheme.com/docs/dynamic-templates/ – here is a quick sample video: https://a.cl.ly/wbudWd4o

If you wanted to do the above recommendation, while having both private and public posts, you could do so by adding the member posts into a specific tag or category. Then you can use this add-on – https://wordpress.org/plugins/term-based-dynamic-post-templates-for-total/ . This plugin will allow you to have a global dynamic template while also creating a separate one specifically for the member only posts tag/category.

Displaying a single notice for anyone logged out rather then the posts and a notice on each one would likely look better. Of course the downside to this is that you wouldn’t be able to categorize/tag them into other categories/tags. In which case, the other consideration is to use a custom post type for all the member-based posts to keep them completely separate from the public blog – this is most common.

One thing I do want to mention though, most WordPress hosting and optimization plugins do not cache AJAX requests. This means functions like load more or infinite scroll will always make the request to the server and can be much slower and put on more stress on the server. Standard pagination is the best for SEO and speed and generally recommended.

- AJ

Hi James,

There is definitely a bug in the Image Banner element, it’s basically ignoring the height 212 so it’s cropping proportionally. I’ve fixed this for the upcoming 6.3 update.

If you want to patch the issue yourself it’s quite simple!

Edit the file located at plugins/total-theme-core/inc/vcex/templates/vcex_image_banner.php and locate line 183:

'height' => $att['img_height'] ?? '',

Where you see $att it should be $atts.

Here is a video showing how you can edit it in the WP admin if you have the plugin editor enabled: https://a.cl.ly/9ZuOjOmv

Sorry for the troubles and thank you for reporting the issue!

- AJ

Hi,

This is AJ the theme author.

I’m not seeing any issues on the site, can you be more specific?

Now, I do see that your site is using WP-Rocket, perhaps you simply needed to clear your WP-Rocket settings?

If you want access to private support you can renew your support license and submit a ticket here – https://my.totalwptheme.com/ – otherwise if you want to share screenshots you can easily do it by uploading them online and sharing the link here. You can use Google Docs, Dropbox or Imgur to share screenshots here in the public forum.

- AJ

ps: If you are using WP-Rocket I do recommend you check out this guide – https://totalwptheme.com/docs/wprocket-setup-recommendations/ – it can help prevent issues when updating.

Hi AJ,

Yes I restored the website to a previous state because the errors were untenable. You’re right to suggest clearing WP-rocket cache and we did to no avail. You can see how it affected the menus here:

Other main content boxes were narrowed by maybe 50%. Any suggestions are appreciated.

Hi,

The issue with the icons would suggest a caching issue (of course hard to know without actually updating and inspecting the updated site). When updating to Total 6.0+ the icons have all been modernized to use SVG’s – https://totalwptheme.com/docs/changelog/6-0/ – if they are rendering large like your screenshot, it would suggest that your site is not loading the new CSS for the SVG based icons which ensures they display at the same font size as the text where they are rendered. The issue in the screenshot could also be caused if the page is showing cached HTML but the CSS is updated.

I’m not sure which “main content boxes” you are referring to, but I do see you are using full width WPBakery rows on the site, which the theme uses advanced CSS to render. There was a known WP-Rocket issue (not sure if they’ve fixed it since) which could cause full-width rows to not render properly if the theme’s CSS files were minified by WP-Rocket as the plugin was incorrectly changing 0px to 0 in the theme’s CSS. This could cause content to not render at their proper width.

I would recommend first making sure WP-Rocket is setup as per the docs – https://totalwptheme.com/docs/wprocket-setup-recommendations/ (this should only take a couple minutes).

Then after updating, be sure to fully clear your site cache and browser cache.

From inspecting your site headers, I can also see you are using CloudFlare as a CDN. It’s very possible you cleared WP-Rocket but not cloudFlare. So make sure to also clear CloudFlare.

Most WordPress hosting solutions also have their own cache you need to clear – so be sure to do that if applicable.

So…update, then clear WP-Rocket, then clear your hosting cache (if applicable), then clear CloudFlare cache, then clear browser cache. In this specific order.

If you do have issues after that, let me know so I can inspect the site.

If there are concerns with having issues updating a live site and waiting for assistance, you could always create a staging version of your site and update the staging version. This way any issues can be sorted out before updating the live site.

Now, I am releasing Total 6.3 most likely tomorrow, so you may want to wait and proceed with the update after that version is released so you don’t have to update twice.

- AJ

ps: I had a quick look at your child theme and didn’t see any CSS that would cause issues with updating per-se. However, I see some CSS that is targeting dynamic classes such as the following CSS:

.vc_section.vc_custom_1631169663711.wpex-vc_section-has-fill.wpex-vc-row-stretched.bg-fixed-top{padding:0px!important}

or 

.vc_custom_1663783762176 h2{font-size:37px!important;margin-top:0px!important}

The “vc_custom_{uniqid}” classes are generated dynamically, which means they can change if you edit the element or even the page.

When targeting specific rows or elements make sure to give them unique classnames or ID’s and reference those in you custom CSS.

There are a few other problematic declarations in the child theme such as:

h1{color:#fff!important}

This code will make it impossible to modify the color of an h1 added via a theme element such as the heading element as well as override the customizer setting under Customize > Typography > H1> Color.

These sort of declarations could cause confusion for others using the site and thinking certain settings are broken.

This may not be a concern depending how the site is managed, but it’s worth mentioning since I did notice it.

Yes, the license is not active in the Theme License section. https://prnt.sc/GIHp8TCWHaq- I copied and pasted it again, it did not help. The domain was not changed. On the page https://my.totalwptheme.com/license-manager/ the license has the Active status and the current domain. I clicked Refresh Licenses but it did not help. If I click Deactivate will the license be completely deleted irrevocably?

If you click de-activate here – https://my.totalwptheme.com/license-manager/ – it simply removes it from any site where it may have been registered so you can properly add it to your site.

Your license itself is part of Envato so you will always own that license. My website is simply for registering your Envato license to specific sites.

What may have happened is perhaps a long time ago the theme allowed to activate the license twice (one for a developer and one for a live site) but I had to change that to comply with Envato rules. It’s possible your license may have been activated in dev mode so you simply need to de-activate it from our site and then re-add it.

- AJ

Thank you! It helped. The license became active.

Hi,

The Full-Screen menu does not have the ability to open menu items to the right side, you would need to use custom CSS to modify how the menus are displayed. You would probably need to modify the design so that the menu is displayed to the left, this way if items open to the right there is enough room. Now, the biggest issue you are going to have and why these sorts of menus generally open down and not to the side is that the only way to display the items to the side (without complex JS) is using absolute position which means the window needs to be large enough to display the items on the side – which is likely not going to be the case on smaller devices such as phones. So you would probably want to wrap your custom CSS inside a media query so it only targets larger screens – or use advanced JS instead so when items are clicked it generates a new container with the sub-items which can be placed statically.

Example CSS using basic re-positioning the menu to the side.

.full-screen-overlay-nav-menu {
    text-align: start;
    width: 500px;
}

.full-screen-overlay-nav-menu li {
    position:relative;
}

.full-screen-overlay-nav-menu ul ul {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
}

Another concern you will have besides mobile support is that the theme’s menu by default doesn’t close items when others are opened (aka accordion effect) as that causes jumpiness on a vertical menu. So you may need to also add javascript to the site to close the open dropdowns when clicking on other dropdowns to prevent them from going on top of each-other.

It would probably be best though to locate a 3rd party plugin or script that works exactly how you want, then use the header builder – https://totalwptheme.com/docs/header-builder/ – to insert the custom menu.

And it would honestly be easier to use a custom script (even if you don’t want to use a 3rd party plugin) to register your own shortcode for use with the header builder, then trying to modify the default behaviour of the theme’s menu. For example:

- AJ

Hi AJ

Thanks, I worked it out. I had named the font “Proxima Nova Thin” in font manager when it should have been just “Proxima Nova”. Now, when I choose weight 100 it correctly loads “thin” – thank you !

However, before figuring it out I tried to open a ticket but saw this message:

“It looks like your support has expired so you do not have access to premium email based support. You can renew your support by purchasing a new standard license or renewing support.”

However I renewed my support on 12th April.

I probably won’t need to open a ticket as the support here is so good, but I wanted you to know I have an active support licence.

Thanks

James

Hi James,

Awesome, I’m glad it was an easy fix!

The support site does cache your licenses (to prevent constantly sending requests to the Envato API) so if you had logged into the site previously, you may just need to click the refresh button. I believe I put a refresh button after this notice, if not there is one on the license manager before the table on the right side – https://my.totalwptheme.com/license-manager/ – this will send the request to Envato to get the latest license data.

-AJ

Thanks – yes that worked.

Hi James,

The Meta element is intended to display a comma separated list of terms.

You should use the Post Terms element instead, this will allow you to choose from various styles including buttons. And for more advanced displays use the new Term Cards element – if you wanted to display categories or other taxonomy cards in more advanced ways, with photos, excerpts, etc.

- AJ

Hi AJ,

I wanted to let you know that I added a line of code that I obtained from the LearnPress GitHub page and it corrected the problem. LearnPress will likely have an update.

Thank you as always for providing the BEST theme on the planet!

Happy Easter weekend!

Frank

Hi Frank,

I hope you had a nice weekend!

I’m glad you got the issue resolved, thank you for letting me know. Hopefully they patch the plugin sooner than later.

- AJ

Hi AJ. Yes, had some great time off and I hope you did as well. Have a great week! Frank

Hi James,

The issue is happening because the way this mobile menu is coded on first tap it opens the items and on second tab it goes to the link (if there is one). The way the theme determines if there is a link or not is by checking if the URL is a # symbol (which is generally used when you don’t want any links). On your site specifically there is no link at all in the code, the href attribute is no where to be found.

See here: https://a.cl.ly/o0ulDKPo

So your links are just an empty tag, which is also invalid HTML.

To fix edit these links and make sure they all are using a # symbol for the link. Additionally you can apply the theme’s class if wanted – https://totalwptheme.com/docs/adding-non-clickable-menu-links/ – this isn’t really needed anymore as the theme uses modern CSS that can detect if the link is a # symbol, but nevertheless it can be a good idea to tag these links with the added classname.

If adding the # symbol as your links for these menu items, doesn’t fix the issue let me know, but it should!

- AJ

Hi James,

This card style by default displays the post title and then the post content inside the toggle.

When you say “nothing is output at all” that makes me think the issue isn’t with the card style, but rather with the post type. Does any card style work? If not, most likely your post type isn’t public so it can’t be queried.

One common issue people have is that they enable the “Exclude from Search” option for their custom post type, which unfortunately also removes it from all custom queries. This has been a known issue for over a decade in WordPress – https://core.trac.wordpress.org/ticket/17592

So, if you can’t see your posts no matter what card style you use, first double check your post type settings to ensure the post type is public and that the exclude from search option isn’t enabled.

- AJ

Hi AJ

“Exclude from Search” is not enabled, so it’s not that.

Now, when you say “post content inside the toggle” ... these posts are made up entirely of ACF fields, there is no “normal” content and the default editor is turned off. I suppose I was expecting the excerpt to be revealed inside the toggle.

Unless there is an easy way I could ge that to work, I’ll rethink it. Do you think it can be achieved using Custom Cards?

Thanks

James

Hi James,

The toggle element displays the post content, not the post excerpt. So if your posts don’t have any content then nothing will show up. If you want to use the excerpt you can achieve this using a custom card – either by overriding the cards/toggle/toggle_1.php file via your child theme or making a custom card via Theme Panel > Custom Cards. If you make a custom card via the WP admin, you can use the theme’s dynamic variables – https://totalwptheme.com/docs/dynamic-variables/ – so you can use {{post_title}} for the toggle heading and {{post_excerpt}} for the toggle content. I believe I coded the toggle element to parse those variables but if it’s not working let me know.

- AJ

Hi,

Looks like you are using the Icon Box element set to the “Top Icon” style – by default this style centers the icon (image). This style aligns the icon and the text in the same place. By default the aligment is in the center, but if you change the text alignment the icon will also move for consistency. Example video: https://a.cl.ly/JruYWAgO – so there isn’t any built-in option you can use to center align the icon/image but also left align the text.

You can add some custom CSS to your site to align the image by giving your icon boxes a unique classname and then targeting them like such:

.center-icon-box-image .vcex-icon-box-symbol{ text-align: center; }

Where “center-icon-box-image” is the class given to each icon box.

Or you can use the Teaser element instead, which is an i mage focused element and does have it’s own image alignment setting.

- AJ

ps: When inspecting the site code I see a bunch of data attributes added in your text – https://a.cl.ly/5zukyWdx – usually this is a sign that someone copied and pasted the content from somewhere else. I mention this, because it can be a huge security concern to do this. If you are copying and pasting from somewhere else, always paste it first into the “text” mode in the editor to ensure there isn’t any fishy code or paste it into a text editor (like Visual Studio) first.

Teaser element works perfect – thank you

re: the code, thanks for pointing that out too. I’ve been generating some of the copy with AI. I did notice this and did my best to remove it. Now you’ve told me the dangers, i’ve reviewed the whole site. Hopefully found and removed it all.

Thanks again AJ

Thank you so much for your reply AJ. The URL is www.jennastorey.com I will try the fixes you suggested. Thank you.

The primary issue with the site, is that the theme is extremely outdated (multiple years outdated). You will want to make sure the Total theme is fully up to date – https://totalwptheme.com/docs/update-theme/

If your client doesn’t have their license registered on the site, they may need to purchase a new license and activate it so they can update. It’s very important to update the site, because this old version most likely isn’t compatible with latest versions of WordPress, PHP and could have bugs/security concerns.

Additionally, on this site the theme’s folder was renamed to “broodenbotter” – this prevents updates from working correctly. One should never rename a theme’s folder as it can break many things and there is no reason to.

So I would highly recommend first going to Theme Panel > Import/Export and copying the settings, then renaming the theme folder via FTP back to “Total”, then going back to the Import/Export panel and importing the site settings. This way the site will be setup correctly so it can receive proper updates and prevent other potential bugs.

- AJ

Thanks so much AJ. Yes, the original designer clearly left some problems that I have to sort out, obviously running deeper than I thought. Thank you for your help.

thanks AJ , look forward to it , I see woocommerce has an update today -version 9.8.2 details , so i may leave that till after the theme update – once i get a FTP copy

Just pushed out Total 6.3.

And I reviewed the WooCommerce 9.8.2 changes and made sure no theme files required any updating.

- AJ

thanks again AJ – good to know -will update over coming days , lookforward to testing the missing fields handling on checkout & Coupon – Thanks

Hi Ben,

The srcset functionality is actually a core WordPress function outside of whatever the theme is doing. Personally, I like disabling it so that my sites use the same images across all devices. Since my images are well optimized (I pass them through tinypng) this is not a concern at all. The theme has a built-in option to disable it via Theme Panel > Image Sizes.

Also, I don’t like to define any image cropping on the site as this creates unnecessary image sizes on the server which bloats up backups (so creating backups takes a lot longer and takes up much more space). I recently wrote a full guide on this if interested: https://www.wpexplorer.com/stop-wordpress-from-creating-extra-cropped-image-sizes/ – there are likely images being created on your site you aren’t aware of. I actually need to double check to ensure I’m doing this on the total demos (I had it on my todo list but can’t remember if I implemented the code yet).

You are correct about the WP implementation using vw units not being accurate as the width of the images is based on the columns they are located in and not necessarily the viewport. Having the image srcset based on the column width would literally impossible to do without advanced Javascript. You would need to set up the site so none of the images load when the site loads (or load the smallest one) and then use javascript to dynamically add the images based on the widths of their parent container. Which is a terrible solution for many reasons and I would never recommend it (not hard to do though – chatGPT could probably spit out the code for you if you really wanted this).

Now, you could add some custom code to your site to modify the WordPress sizes attribute – https://developer.wordpress.org/reference/functions/wp_calculate_image_sizes/ – but in order to target your specific grid, you will need to make sure the grid uses a specific image size (not custom, but a defined/named image size) so that you can target that specific image. Or you will need to apply the filter on the wpex_hook_post_cards_loop_before loop (so you can check to see what post cards element is being shown) and then remove the filter on the wpex_hook_post_cards_loop_after hook – this way your code will only apply to the post cards element you want it to apply to.

Remember also that some devices, even though the screen is smaller should actually have larger images (aka Retina) – which is another reason I prefer not messing with srcset and uploading large enough images that are pre-optimizes prior to upload that will simply look good on all devices while being as small as possible. If you were to take a photo from your site for example this one – http://s357715114.online.de/wp-content/uploads/2025/04/Test_1.jpg – it is 242kb and a smaller variation – http://s357715114.online.de/wp-content/uploads/2025/04/Test_1-960x540.jpg – is 85kb. The original image is 2088×117, which is quite large and perhaps not really needed to be this large. If I were to resize it to 1500px width then optimize it, the image will only be 93kb – https://a.cl.ly/jkuByNlj – which is really quite small for an image and will load quickly on all devices, while still looking good on retina. Then you don’t have to have all these extra images cropped on your servers and slim down the html and rendering but not needing srcset attributes.

- AJ