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 Display Discount Countdown for Products in WooCommerce https://xtratheme.com/docs/theme-options/display-discount-countdown-for-products-in-woocommerce/ https://xtratheme.com/docs/theme-options/display-discount-countdown-for-products-in-woocommerce/#respond Wed, 13 Aug 2025 10:49:09 +0000 https://xtratheme.com/docs/?p=4829

WooCommerce Sales Countdown Timer on Product Page

Step 1
XTRA

This feature lets you display a countdown timer on the product page for items on sale in WooCommerce. The timer shows customers exactly how much time is left until the discount ends, creating a sense of urgency and encouraging quicker purchase decisions. The countdown design is fully customizable to match your site’s style and branding.

Woo timer
]]>
https://xtratheme.com/docs/theme-options/display-discount-countdown-for-products-in-woocommerce/feed/ 0
Free Shipping Progress Bar for Cart & Checkout Pages https://xtratheme.com/docs/theme-options/free-shipping-progress-bar-for-cart-checkout-pages/ https://xtratheme.com/docs/theme-options/free-shipping-progress-bar-for-cart-checkout-pages/#respond Tue, 12 Aug 2025 07:41:50 +0000 https://xtratheme.com/docs/?p=4824

Display Free Shipping Goal Progress in Cart and Checkout

Step 1
XTRA

This feature allows you to display a progress bar on the Cart and Checkout pages, showing customers how much more they need to spend to qualify for free shipping. It encourages customers to add more items to their cart, helping to increase your average order value. The free shipping threshold is fully customizable, and the progress bar updates automatically based on the cart total.

Access Path:
Theme Options > WooCommerce > Products Settings > Free shipping bar

Progres
]]>
https://xtratheme.com/docs/theme-options/free-shipping-progress-bar-for-cart-checkout-pages/feed/ 0
Gradient Overlay Option for Gallery & Text Marquee Elements https://xtratheme.com/docs/theme-options/gradient-overlay-option-for-gallery-text-marquee-elements/ https://xtratheme.com/docs/theme-options/gradient-overlay-option-for-gallery-text-marquee-elements/#respond Mon, 11 Aug 2025 13:16:26 +0000 https://xtratheme.com/docs/?p=4813

Add Gradient Effects to Gallery and Text Marquee

Step 1
XTRA

With this option, you can add a Gradient Overlay to Gallery and Text Marquee elements. This layer allows you to display images and text with more attractive color combinations and a modern visual touch. It also improves text readability over images, giving your website a more professional look. Colors and transparency of the gradient can be fully customized to match your design style perfectly.

Gallery
Gal1
Gal222
Text Marquee
Textmarq1
Tesxmq2
]]>
https://xtratheme.com/docs/theme-options/gradient-overlay-option-for-gallery-text-marquee-elements/feed/ 0
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
Collect Emails as WP Subscribers with AJAX https://xtratheme.com/docs/theme-options/collect-emails-as-wp-subscribers-with-ajax/ https://xtratheme.com/docs/theme-options/collect-emails-as-wp-subscribers-with-ajax/#respond Sat, 09 Aug 2025 09:22:21 +0000 https://xtratheme.com/docs/?p=4800

Name Field & AJAX Support for Subscribe Element

Step 1
XTRA

Collect subscriber names and emails via built-in AJAX. Submissions are stored as WordPress Subscriber accounts after email confirmation (double opt-in). Manage them in Users > All Users and connect to tools like MailPoet, Newsletter Plugin, or Mailchimp for WP.

1
Ajax subscribe
]]>
https://xtratheme.com/docs/theme-options/collect-emails-as-wp-subscribers-with-ajax/feed/ 0
Carousel Layout for Product by Category: Add Trending Sliders with Ease https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/ https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/#respond Wed, 06 Aug 2025 14:46:16 +0000 https://xtratheme.com/docs/?p=4791

Enable Carousel for Product by Category Element

Step 1
XTRA

This feature allows designers to easily showcase products in a carousel format based on a selected category — a highly popular and engaging layout style for modern websites.

 

1pc
2pc
33pc
]]>
https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/feed/ 0
How to Apply Inverted Border Radius to Images, Banners, Video, Content Box and Service Box? https://xtratheme.com/docs/theme-options/how-to-apply-inverted-border-radius-to-images-banners-and-service-box/ https://xtratheme.com/docs/theme-options/how-to-apply-inverted-border-radius-to-images-banners-and-service-box/#respond Tue, 05 Aug 2025 12:18:36 +0000 https://xtratheme.com/docs/?p=4785

Inverted Radius Settings for Enhanced Visual Styling

Step 1
XTRA

This feature allows you to apply inverted border radius to various elements including images, banners, content boxes, videos, and service boxes. Instead of rounding corners inward (the traditional way), you can now create cut-out or concave corner effects, giving your layout a more dynamic and creative look.

You’ll find these options in each element’s Content tab under the Inverted Radius section.



To use this feature, simply add one of the supported elements—Image, Banner, Content Box, Video, or Service Box—to your page.

This is perfect for modern or minimal designs and lets you enhance visual interest without writing any custom CSS.

Inverted radius
]]>
https://xtratheme.com/docs/theme-options/how-to-apply-inverted-border-radius-to-images-banners-and-service-box/feed/ 0
Add Secure Payment Info to Product Pages https://xtratheme.com/docs/theme-options/add-secure-payment-info-to-product-pages/ https://xtratheme.com/docs/theme-options/add-secure-payment-info-to-product-pages/#respond Tue, 05 Aug 2025 11:37:49 +0000 https://xtratheme.com/docs/?p=4779

Show Trusted Payment Details on Single Product Page

Step 1
XTRA

You can now display a secure payment information section directly on each single product page—helping to reassure customers during the buying journey.

You can enable it from:
Theme Options > WooCommerce > Product Settings > Secure cards image



It allows you to show trust badges, SSL icons, or a short reassuring message about payment security—like encrypted transactions, money-back guarantees, or secure checkout providers.

This is especially useful for eCommerce stores that want to reduce cart abandonment and increase customer trust, particularly for first-time buyers. With just a small visual cue, you can make a big impact on conversion rates.

 

Paym
]]>
https://xtratheme.com/docs/theme-options/add-secure-payment-info-to-product-pages/feed/ 0
Low-Opacity Hover Effect for Navigation Menus https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/ https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/#respond Mon, 04 Aug 2025 07:08:36 +0000 https://xtratheme.com/docs/?p=4774

Dim Inactive Menu Items on Hover for Cleaner Focus

Step 1
XTRA

This feature adds a sleek visual touch to your navigation menus: when you hover over a menu item, the non-hovered items automatically dim using a low-opacity effect. This makes the active item stand out and helps guide user attention more effectively.

You can enable it from:
Theme Options > Header > Menus Hover Effects >Menus hover opacity



This subtle animation enhances the user experience, especially on design-focused websites, by reducing visual clutter and improving readability. It’s a great way to create a more polished, interactive feel without being intrusive.

Menu hover opacity
]]>
https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/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