WOOCOMMERCE
HEADERS
DOCUMENTACIÓN
Intro and Use
First of all we want to thank you your purchase.
We hope you enjoy this layouts and help you achieve your goals. If you have any doubt or suggestion you can write us to support@destacaimagen.com
Using WooHeaders is super easy. Just follow these simple steps:
-
- First, download the wooheaders.zip file.
- Unzip the file and open the extracted folder.
- Inside, you’ll find a collection of JSON files.
- Pick the one you like and upload it to your Divi Library:
Divi > Portability (Import/Export icon) > Import > Choose the JSON file. - Then go to your WordPress Dashboard > Divi > Theme Builder.
- Add a Global Header and choose Add From Library.
- Select your layout from Your Saved Layouts and click Save Changes.
- Visit your site to see the header in action.
- Now, start customizing and make it yours!
Having trouble with the import?
Sometimes Divi can throw errors during the import process, or the content might not import completely. These issues often happen when your server doesn’t meet Divi’s recommended minimum requirements.
In this case, go to Divi > Support Center and check the System Status tab. There, you’ll see which server settings need to be increased by your hosting provider.
Css and Jquery
Each layout includes a dedicated row that should not be deleted. This row contains two code modules — one for custom CSS and one for jQuery — which are essential for the header’s functionality and appearance.
We’ve added extra classes to rows, columns, and Divs so that everything displays properly and remains fully responsive. These classes also make it easier to customize each layout to fit your site’s style.
So, before you start editing, make sure you don’t remove or overwrite that special row — it’s what keeps things running smoothly!
Cart Notification
To display the number of products in the cart next to the cart icon, you’ll need to add a PHP script to your website.
You have two options:
- Add the script to your theme’s functions.php file, or
- Use a plugin like Code Snippets, which allows you to safely add PHP code without touching theme files.
The script can be found inside the “supplementary-files” zip included in the download. You can also copy it directly from this screen.
Once the script is active, the cart notification will work automatically and update in real time as users add products.
function ecommerce_cart_enqueue() {
wp_localize_script( 'jquery', 'ecommerce_ajax_obj', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security_nonce' => wp_create_nonce( 'ecommerce_security_nonce' )
));
}
add_action( 'wp_enqueue_scripts', 'ecommerce_cart_enqueue', 20 );
function ecommerce_cart_items() {
check_ajax_referer( 'ecommerce_security_nonce', 'security' );
global $woocommerce;
$cart_items = array();
$count = 0;
$items = $woocommerce->cart->get_cart();
foreach($items as $item => $values) {
$count += $values['quantity'];
}
wp_send_json( array( 'count' => $count ));
}
add_action( 'wp_ajax_ecommerce_cart_items', 'ecommerce_cart_items' );
add_action( 'wp_ajax_nopriv_ecommerce_cart_items', 'ecommerce_cart_items' );
function js_ecommerce_cart_items(){
echo "";
}
add_action( 'wp_footer', 'js_ecommerce_cart_items' );
Customizing the Color
To change the color of the cart notification badge:
Open the CSS code module inside the layout.
Look for the variable –notification.
Replace its value with the color you want (e.g., #ff0000 or blue).
That’s it — the background color will update instantly.
Search
Some of the search section included in the layouts are initially hidden and only appear when the user clicks the search icon. Because of this setup, you won’t see them directly in the layout preview.
To edit the search module, you’ll need to open the layout from the Divi Theme Builder:
Go to Divi > Theme Builder.
Click on Edit in the Global Header where your layout is loaded.
Once found, you can edit the style, placeholder text, or settings as needed.
This setup helps keep the header clean while still offering a fully functional search experience when needed.
Gtranslate
Some of these header layouts are designed to display a language switcher using the free GTranslate plugin.
To make it visible on your site:
-
- Install and activate the GTranslate plugin from the WordPress plugin repository.
- The language switcher will automatically appear in the headers that support it — no extra setup needed.
It’s a quick way to make your site multilingual without complicated configurations.