theme options – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Thu, 14 Aug 2025 10:53:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Add Brand or Category Subtitle to WooCommerce Product Archives https://xtratheme.com/docs/theme-options/add-brand-or-category-subtitle-to-woocommerce-product-archives/ https://xtratheme.com/docs/theme-options/add-brand-or-category-subtitle-to-woocommerce-product-archives/#respond Sat, 09 Aug 2025 10:16:18 +0000 https://xtratheme.com/docs/?p=4806

WooCommerce Archive Products: Show Category or Brand Subtitle

Step 1
XTRA

This feature allows you to display either a category or a brand subtitle on WooCommerce archive product pages. The choice is fully customizable, giving users control over which option to show for better browsing and brand visibility.

Access Path:
Theme Options > WooCommerce > Products Settings > Products subtitle

Bran cat
]]>
https://xtratheme.com/docs/theme-options/add-brand-or-category-subtitle-to-woocommerce-product-archives/feed/ 0
Control Heading Tags for WooCommerce Page Titles https://xtratheme.com/docs/theme-options/control-heading-tags-for-woocommerce-page-titles/ https://xtratheme.com/docs/theme-options/control-heading-tags-for-woocommerce-page-titles/#respond Mon, 04 Aug 2025 06:27:39 +0000 https://xtratheme.com/docs/?p=4768

Set Heading Tags (H1–H6) for WooCommerce Inner Titles

Step 1
XTRA

For better SEO flexibility, you now have full control over the HTML heading tags (H1–H6) used for inner titles on WooCommerce pages—such as Shop, Product Categories, and more.

You can adjust this setting via:
Theme Options > WooCommerce > Product Settings > Product title tag


This feature is especially useful for improving your site’s semantic structure and aligning with SEO best practices. For example, you might want to reserve <h1> for your main page title and use <h2> or <h3> for inner headings to maintain proper hierarchy.

By setting the appropriate heading tag, you can ensure better crawlability, improved accessibility, and clearer content structure for both users and search engines.

 

Page seo header2
]]>
https://xtratheme.com/docs/theme-options/control-heading-tags-for-woocommerce-page-titles/feed/ 0
WooCommerce Product Tabs Icons https://xtratheme.com/docs/theme-options/add-icons-to-woocommerce-product-page-tabs/ https://xtratheme.com/docs/theme-options/add-icons-to-woocommerce-product-page-tabs/#respond Sun, 03 Aug 2025 07:47:57 +0000 https://xtratheme.com/docs/?p=4762

WooCommerce Tab Icons in Single Product Page

Step 1
XTRA

Tabs on single product pages—like Description, Additional Information, and Reviews—can now include icons to make navigation more intuitive and visually appealing.

You can find it under:
Theme Options > WooCommerce > Product Settings > Tabs Icons


Using icons next to tab titles helps users quickly identify different sections, improves readability, and adds a layer of professionalism to your product layout. It’s especially effective for mobile users, where space is limited and visual cues play a bigger role. Whether you choose simple symbols or custom icons, this feature gives you more flexibility to tailor your product pages to your brand style.

Tabs icon2
]]>
https://xtratheme.com/docs/theme-options/add-icons-to-woocommerce-product-page-tabs/feed/ 0
Hide Title on Single Product Page https://xtratheme.com/docs/theme-options/hide-title-on-single-product-pages-with-one-click/ https://xtratheme.com/docs/theme-options/hide-title-on-single-product-pages-with-one-click/#respond Sun, 03 Aug 2025 07:24:38 +0000 https://xtratheme.com/docs/?p=4756

Option to Disable Product Title on Single Product Pages

Step 1
XTRA

A new setting has been introduced that allows you to hide the title on single product pages—a simple yet powerful option for cleaner product layouts.

You can find it under:
Theme Options > WooCommerce > Product Settings > Hide Product Title


This feature is especially useful for stores using custom-designed banners or product headers, where the default title may feel redundant or disrupt the visual flow. By disabling the title, you gain more control over your product page appearance without touching any code.

It’s ideal for minimal layouts, promotional product pages, or when using full-width hero images instead of standard product headers.

Titile hide
]]>
https://xtratheme.com/docs/theme-options/hide-title-on-single-product-pages-with-one-click/feed/ 0
Add SVG Cursor Effect to Carousels https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/ https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/#respond Sat, 02 Aug 2025 10:11:17 +0000 https://xtratheme.com/docs/?p=4748

Add an Animated SVG Cursor to Your Carousel on Hover

Step 1
XTRA

A new option has been added to enhance user interaction on carousels: SVG cursor on mouse hover. Instead of using the default pointer, you can now apply a custom SVG cursor that appears specifically when users hover over carousel elements.

Navigate to:
Theme Options > General > Advanced > Carousel Hover Cursor


This feature is perfect for adding a modern, creative touch to your sliders—whether you want a stylish arrow, animated icon, or any custom-designed SVG. It helps create a more immersive and branded experience, especially for design-forward websites or minimal layouts. A small detail, but one that makes your UI feel sharper and more engaging.

Svg22
]]>
https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/feed/ 0
Header Popup Login and Registration Element Now with Advanced Settings https://xtratheme.com/docs/theme-options/header-popup-login-and-registration-element-now-with-advanced-settings/ https://xtratheme.com/docs/theme-options/header-popup-login-and-registration-element-now-with-advanced-settings/#respond Sat, 02 Aug 2025 09:50:32 +0000 https://xtratheme.com/docs/?p=4739

Fully Customizable Header Popup for Login and Registration

Step 1
XTRA

The theme now includes a fully customizable popup login & register element that can be added directly to the header. This powerful feature allows you to create seamless, modern authentication popups with complete control over styling, layout, and behavior—no third-party plugins required. It’s ideal for websites that want to offer quick user access without redirecting visitors away from the current page. All settings can be managed easily within the theme panel for a fully integrated experience.

 

 

Popup
]]>
https://xtratheme.com/docs/theme-options/header-popup-login-and-registration-element-now-with-advanced-settings/feed/ 0
Particles Effect Settings for Title and Breadcrumbs Area https://xtratheme.com/docs/theme-options/particles-effect-settings-for-title-and-breadcrumbs-area/ https://xtratheme.com/docs/theme-options/particles-effect-settings-for-title-and-breadcrumbs-area/#respond Wed, 30 Jul 2025 10:18:23 +0000 https://xtratheme.com/docs/?p=4722

Enable Particle Effects in Title and Breadcrumbs

Step 1
XTRA

You can now enable particle effects in the title and breadcrumbs area to add subtle motion and visual interest to your page headers. This effect helps create a more dynamic and modern look, especially for creative or visually rich websites. The particles can be customized in terms of density, speed, and color to match your site’s overall design. It’s a lightweight enhancement that improves the aesthetic without affecting performance. This option is ideal for landing pages, portfolios, and sections where visual impact matters.


Go to :
Theme Options > Header > Title & Breadcrumbs > Particles

11pp
Ppp2
]]>
https://xtratheme.com/docs/theme-options/particles-effect-settings-for-title-and-breadcrumbs-area/feed/ 0
Overlay Effect for Dropdown and Shopping Cart https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/ https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/#respond Wed, 30 Jul 2025 07:06:56 +0000 https://xtratheme.com/docs/?p=4715

Overlay Effect for Dropdown and Shopping Cart

Step 1
XTRA

When a dropdown menu or the cart panel is opened, a focus overlay can appear between the header and the rest of the page content. This overlay helps visually isolate the active element, such as the navigation dropdown or shopping cart, by dimming the background and reducing distractions. It improves the user experience on both desktop and mobile by guiding attention and reinforcing the interaction context—especially useful for websites with complex navigation or eCommerce features.


Go to :
Theme Options > Header > Menus Hover Effects > Dropdown overlay

Qqqq1
]]>
https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/feed/ 0
Classic Theme Options Mode https://xtratheme.com/docs/theme-options/classic-theme-options-mode/ https://xtratheme.com/docs/theme-options/classic-theme-options-mode/#respond Tue, 29 Jul 2025 12:28:31 +0000 https://xtratheme.com/docs/?p=4691

Accessing Theme Options in Classic Mode

Step 1
XTRA

You can switch to the classic view of Theme Options if you prefer a traditional interface instead of the live preview.


Go to :
Dashboard > Xtra > Classic Theme Options

Classic theme options
]]>
https://xtratheme.com/docs/theme-options/classic-theme-options-mode/feed/ 0
Search Form & Account Icon Above Mobile Menu https://xtratheme.com/docs/theme-options/search-form-account-icon-above-mobile-menu/ https://xtratheme.com/docs/theme-options/search-form-account-icon-above-mobile-menu/#respond Tue, 29 Jul 2025 12:00:18 +0000 https://xtratheme.com/docs/?p=4686

Displaying Search and Account Icons Above the Mobile Menu

Step 1
XTRA

You can now place a search form and user account icon directly above the off-canvas mobile menu. This layout improves accessibility by giving mobile users quick access to search and login functionalities.

You can access the settings at:

Theme Options > Header > Mobile Header > Above Menu


When enabled, your mobile menu will display a clean search bar along with an optional account/login icon. This setup is especially useful for eCommerce sites, blogs, and content-rich websites where fast navigation matters.

This user interface adjustment enhances the mobile experience by streamlining interactions and improving overall usability on small screens.

Mobil menu header
]]>
https://xtratheme.com/docs/theme-options/search-form-account-icon-above-mobile-menu/feed/ 0
Upload Your Custom Fonts Directly From the Theme Options https://xtratheme.com/docs/theme-options/upload-your-custom-fonts-directly-from-the-theme-options/ https://xtratheme.com/docs/theme-options/upload-your-custom-fonts-directly-from-the-theme-options/#respond Mon, 28 Jul 2025 11:20:31 +0000 https://xtratheme.com/docs/?p=4676

Using the Custom Font Uploader in Theme

Step 1
XTRA

You now have the freedom to fully personalize your site’s typography using the built-in Custom Font Uploader.

You can access the new settings at:

Theme Options > Typography


Here, you’ll find the Font Uploader section where you can easily upload .woff, .ttf, or .otf files and assign them to different elements across your site—headers, body text, buttons, and more.

This feature is perfect for:

  • Maintaining brand identity with unique typefaces
  • Enhancing multilingual sites with niche fonts
  • Creating standout visual styles for creative projects
Typo
]]>
https://xtratheme.com/docs/theme-options/upload-your-custom-fonts-directly-from-the-theme-options/feed/ 0
How to customize Footer Separator section? https://xtratheme.com/docs/theme-options/how-to-customize-footer-separator-section/ https://xtratheme.com/docs/theme-options/how-to-customize-footer-separator-section/#respond Mon, 28 Jul 2025 10:48:46 +0000 https://xtratheme.com/docs/?p=4671

Footer Separator Styles

Step 1
XTRA

Customizable footer separators allow you to create a clear visual boundary between your footer and the main content. These separators enhance structure and design, adding visual depth with minimal effort.


You can access the settings at:

Theme Options > Footer > Footer Separator


From there, you can choose from a variety of styles such as solid lines, waves, angles, curves, and more. Each style is fully responsive and adapts seamlessly to your site’s layout.

Whether you’re aiming for a clean divide or a decorative transition, footer separators give you flexible tools to shape your page structure.

Foter sep
]]>
https://xtratheme.com/docs/theme-options/how-to-customize-footer-separator-section/feed/ 0
How to setup Hover Effects for Menu Navigation? https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/ https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/#respond Sun, 27 Jul 2025 11:16:37 +0000 https://xtratheme.com/docs/?p=4659

Enhance Menus with Professional Hover Effects

Step 1
XTRA

Hover effects can add interactivity and style to your navigation menus. With over 30 options available, you can choose between subtle animations and bold transitions to suit your design needs.

You can access the settings at:

Theme Options > Header > Menu Hover Effects


These effects help your menus stand out, improve user experience, and enhance the visual appeal of your site—ideal for portfolios, agencies, or design-focused websites.

Hover menu eefect
]]>
https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/feed/ 0
How to add/remove Expandable Menus for Fixed Mobile Navigation? https://xtratheme.com/docs/theme-options/how-to-add-remove-expandable-menus-for-fixed-mobile-navigation/ https://xtratheme.com/docs/theme-options/how-to-add-remove-expandable-menus-for-fixed-mobile-navigation/#respond Sun, 27 Jul 2025 10:11:39 +0000 https://xtratheme.com/docs/?p=4650

Expandable Menus for Fixed Mobile Navigation

Step 1
XTRA

Expandable menus in the mobile fixed navigation area allow you to create cleaner and more dynamic mobile menus, improving both usability and design. This feature is especially useful for websites with multi-level menus or extensive product categories, as it helps organize submenus in a sleek, expandable format.

Where to find it?
Theme Options > Header > Mobile Fixed Navigation > Expandable Menu

Expended mn2u
]]>
https://xtratheme.com/docs/theme-options/how-to-add-remove-expandable-menus-for-fixed-mobile-navigation/feed/ 0
How to Move Shop Category Description Below Products in WooCommerce? https://xtratheme.com/docs/how-to/how-to-move-shop-category-description-below-products-in-woocommerce/ https://xtratheme.com/docs/how-to/how-to-move-shop-category-description-below-products-in-woocommerce/#respond Tue, 08 Oct 2024 07:53:45 +0000 https://xtratheme.com/docs/?p=4573

Moving the product category page description below the products

Step 1
Xtra

Placing the description of the products below on WooCommerce shop pages enhances user experience by immediately showing shoppers what they’re looking for products for without forcing them to scroll past lengthy text. This cleaner layout improves mobile usability and keeps visitors engaged, reducing bounce rates. From an SEO perspective, having the description below still allows search engines to index important content with keywords, optimizing for rankings without compromising the customer journey. This balance between UX and SEO leads to better performance and higher conversions.

To move the display of descriptions below the products, follow this path:

Theme Options > WooCommerce Pro > Products Settings > Turn On Description Below 

Woo pro desc
]]>
https://xtratheme.com/docs/how-to/how-to-move-shop-category-description-below-products-in-woocommerce/feed/ 0
How to Add a Product-Specific Search Form in WordPress theme? https://xtratheme.com/docs/how-to/how-to-add-a-product-specific-search-form-in-wordpress-theme/ https://xtratheme.com/docs/how-to/how-to-add-a-product-specific-search-form-in-wordpress-theme/#respond Tue, 24 Sep 2024 08:16:31 +0000 https://xtratheme.com/docs/?p=4437

Add a Product-Specific Search Form

Step 1
Xtra

If you want to place a search box in the header that only shows search results for products, you can enable the search element in the header and set it to “Only products?” and the button.

Go to Theme Options > Header > Select a Header > Add Search Element > Turn on Only products.

Sercj

There is another option where you can place the search form in a widget, which is explained step-by-step in the tutorial below:

Go to Dashboard > Appearance > Widgets > Find Product Search widget then drag and drop this to a Sidebar. 

Produc searc
]]>
https://xtratheme.com/docs/how-to/how-to-add-a-product-specific-search-form-in-wordpress-theme/feed/ 0
How to Change Title Bar ‌Background Image? https://xtratheme.com/docs/how-to/how-to-change-title-bar-background-image/ https://xtratheme.com/docs/how-to/how-to-change-title-bar-background-image/#respond Tue, 24 Sep 2024 05:39:51 +0000 https://xtratheme.com/docs/?p=4408

Change Background Image of Breadcrumbs

Step 1
Xtra

To insert an image or change the background image of the breadcrumbs in the Theme, you can proceed from the following path:

Header > Title and Breadcrumbs > StyleKit of Container > Background > Upload an Image there

Breadcrum

To change the title Bar background in a single post or page, you can adjust the settings through the following path:

Custom page/post title background:

  1. Dashboard > All Posts/Pages
  2. Page Settings
  3. Header Settings
  4. StyleKit of Title Background
  5. Upload an Image in Image field
Titlr bg fa
]]>
https://xtratheme.com/docs/how-to/how-to-change-title-bar-background-image/feed/ 0
How to Edit Product Tabs in WooCommerce? https://xtratheme.com/docs/how-to/how-to-edit-product-tabs-in-woocommerce/ https://xtratheme.com/docs/how-to/how-to-edit-product-tabs-in-woocommerce/#respond Sat, 21 Sep 2024 07:49:02 +0000 https://xtratheme.com/docs/?p=4397

Edit Product Tabs in WooCommerce

Step 1
Xtra

To edit the tabs, Navigate to Theme Options > WooCommerce Pro > Product Settings 

Woo tab

The content of the Brand,  Size Guide, and FAQ tabs can be edited via the:

Dashboard > Products > Brand/Size Guide/FAQ, as shown in the screenshots below:

Brand j
Size guid
Faq e

To customize the style of the tabs, you can follow the path below:

Theme Options > WooCommerce Pro > Product Styling > StyleKit of Tabs, Tab content, Active Tab.

As shown in the screenshot below:

Style of prod
Single prod
]]>
https://xtratheme.com/docs/how-to/how-to-edit-product-tabs-in-woocommerce/feed/ 0
How to Translate Comments Section Titles in Theme? https://xtratheme.com/docs/how-to/how-to-translate-comments-section-titles-in-theme/ https://xtratheme.com/docs/how-to/how-to-translate-comments-section-titles-in-theme/#respond Fri, 20 Sep 2024 13:09:57 +0000 https://xtratheme.com/docs/?p=4350

Translating the Title of Comments Field

Step 1
Xtra
To translate the comment field titles in the Xtra WordPress theme, follow these steps:

Go to Theme Options > Blog > Single Settings.
Blog cm
]]>
https://xtratheme.com/docs/how-to/how-to-translate-comments-section-titles-in-theme/feed/ 0
How to Use Custom Breadcrumbs with Shortcodes in WordPress Theme? https://xtratheme.com/docs/how-to/how-to-use-custom-breadcrumbs-with-shortcodes-in-wordpress/ https://xtratheme.com/docs/how-to/how-to-use-custom-breadcrumbs-with-shortcodes-in-wordpress/#respond Thu, 19 Sep 2024 11:16:26 +0000 https://xtratheme.com/docs/?p=4340

Description

Step 1
Xtra

Use Custom Breadcrumbs with Yoast Shortcodes

The Xtra WordPress theme has built-in customization options for breadcrumbs. However, there are also several plugins available that can enhance this functionality and provide additional features.

In WordPress, several plugins provide breadcrumb functionality. Here are some of the most popular options:

  • Yoast SEO
    This well-known SEO plugin includes a built-in breadcrumbs feature that can be easily enabled and customized. It’s a great choice if you already use Yoast for SEO optimization.

  • Breadcrumb NavXT
    This plugin offers a flexible breadcrumb navigation system. It provides extensive options for customization, allowing you to tailor the appearance and functionality to fit your theme.

  • SEOPress
    SEOPress is a comprehensive SEO plugin that also includes breadcrumbs functionality. You can activate and configure breadcrumbs easily within its settings.

  • WP Breadcrumbs
    A straightforward plugin that allows you to add breadcrumb navigation to your site. It comes with simple settings for integration.

  • Flexible Breadcrumbs
    This plugin provides an easy way to add and customize breadcrumbs. It allows for simple adjustments to the design and layout.

  • Simple Breadcrumbs
    As the name suggests, this is a lightweight and simple plugin for adding breadcrumbs to your WordPress site without complicated settings.

These plugins enable you to implement effective breadcrumb navigation, enhancing user experience and potentially improving SEO on your website. In this tutorial, we will teach you how to create breadcrumbs using the Yoast plugin:

  1. Log in to your WordPress website.

    When you’re logged in, you will be in your ‘Dashboard’.

  2. Click on ‘Yoast SEO’.

    On the left-hand side, you will see a menu. In that menu, click on ‘Yoast SEO’.

  3. Click on “Settings”.

    The “Yoast SEO” settings will expand providing you with additional options. Click on “Settings”.

  4. Click on the “Advanced” section in the settings menu on the left-hand side.

  5. Click “Breadcrumbs” in the menu that expands.

    The “Advanced” menu will expand. Click the “Breadcrumbs” menu item.

  6. Scroll down to the bottom of the screen and toggle the switch behind “Enable breadcrumbs for your theme”.

    You’ll be on the Breadcrumbs settings page. Scroll down to the bottom to see the toggle. To enable the Yoast SEO breadcrumbs, toggle the switch to on. To disable the Yoast SEO breadcrumbs, toggle the switch off.

  7. Create a saved template with Elementor
    and insert the following specific shortcode into the breadcrumbs you design.

  8. Theme Options in Xtra Theme:
    Go to Theme Options > Header > Title & Breadcrumbs > Select Title type > Custom Page Content and choose the content from the saved template you created.

  9.  Click on the Publish.
2 6
7
Last
]]>
https://xtratheme.com/docs/how-to/how-to-use-custom-breadcrumbs-with-shortcodes-in-wordpress/feed/ 0