That’s a common problem. Many WooCommerce store owners face this same issue, especially when managing multiple shipping options within the same shipping zone.

In this tutorial, I will show you how to diagnose and fix the issue where your free shipping method (or any other method) does not work as expected—even when the order amount meets the criteria.

Why the Shipping Method Isn’t Showing Up?

Let’s say that you have two shipping methods enabled in your WooCommerce store:

• Flat Rate Shipping – A fixed shipping fee, for example, $7.75.
• Free Shipping – Available on orders over $30.

Logically, when a customer adds products worth more than $30 to their cart, the free shipping method should automatically appear at checkout, giving them the option to select it and reduce the cost.

However, many users find that, despite crossing the set threshold, the checkout page stubbornly continues to show the flat-rate shipping option, completely ignoring the free shipping option.

Even refreshing the cart or checkout doesn’t help. That can be frustrating and confusing because we set up two different methods in WooCommerce, but only the flat rate is being applied.

Moreover, our business reputation can get damaged in our customer’s eyes if they think we are trying to overcharge them.

Such confusion will slow down or prevent the customer from completing the checkout, causing our business to lose money.

Step 1: Identify the Conflict in Shipping Zone Configuration

This issue lies in how WooCommerce handles shipping methods within shipping zones. A shipping zone is a geographic region you define to apply specific shipping rules. Most WooCommerce stores have zones, such as North America, Europe, or particular countries.

In this scenario, both flat rate and free shipping methods are configured separately but assigned to the same shipping zone.

This creates a conflict because WooCommerce can only apply one shipping method at a time. In most cases, the flat rate shipping method will overwrite the others and hide the free shipping option.

To verify this, navigate to your WordPress dashboard:

1. Go to WooCommerce > Settings > Shipping > Shipping Zones.
2. Look for the shipping zone column to see the methods that apply to your customers (e.g., North America).
3. Verify that more than one shipping method is listed under that zone.

You will likely see both the flat rate and free shipping methods listed separately, which causes them to override each other.

Step 2: Remove the Conflicting Free Shipping Method

To fix this, delete the free shipping (or the flat-rate shipping) method that is currently configured separately in the shipping zone.

This will leave only a single shipping method. Here’s how to delete the free shipping method:

1. Locate the free shipping method.
2. Click the “Delete” or “Remove” option next to it.
3. Confirm the removal to retain only the flat-rate shipping method.

Once completed, your shipping zone will only have the flat rate shipping method configured. This is important before you add multiple shipping methods correctly.

Step 3: Rename the Existing Flat Rate Method

Since you will be adding multiple shipping methods to the same zone, it’s better to rename the existing flat-rate shipping method to something more generic. Instead” of “Flat rate,” rename it to something such as “Standard Shipping” or “USA Rates” to reflect that there are now multiple shipping options.

To rename the flat rate method:

1. Click the Edit link next to the flat rate method.
2. Change the Method Title to a more descriptive name.
3. Save your changes.

This step will help you understand how to configure shipping zones should you need to adjust them later.

Step 4: Add Free Shipping as a New Method Correctly

Now that the new flat rate method has been renamed to include all methods, it’s time to add free shipping as a new shipping method under the same shipping zone.

This time, add it as a new shipping method under the existing flat-rate option.

Follow these steps:

1. In the Shipping Zone settings, click “Add Shipping Method.”
2. Select Free Shipping from the dropdown menu.
3. Click Add Shipping Method to confirm.
4. Now, click Edit next to the free shipping method.
5. Set the ‘Free Shipping Requires…’ condition to ‘Minimum order amount‘ or any other condition based on your store’s needs.
6. Enter your desired minimum order amount.
7. Save your changes.

With this setup, WooCommerce will automatically show the free shipping option once the cart reaches or exceeds $30.

Step 5: Verify the Shipping Options on Cart and Checkout Pages

Once you add the new shipping method, test whether the free shipping option appears as expected on both the cart and the checkout page.

• Add products to your cart so the total is above $30.
• Go to the cart page and refresh it. You should see both shipping options: the flat rate and the free shipping method.
• Refresh the cart to confirm the relevant shipping options are visible and can be selected.
• The customer can now choose between free shipping (when eligible) and a flat rate if they prefer.

Step 6: Set Free Shipping as the Default Option (Optional)

If you prefer to make free shipping the default option for eligible orders, automatically selected when customers reach the minimum order amount, you will need to reorder the shipping methods in the shipping zone settings.

To do this:

1. In the shipping zone settings, drag the free shipping method to the top of the list.
2. Save your changes.

Now, when a customer’s order qualifies for free shipping, it will be pre-selected on the checkout page, making the experience smoother and the customer happier

Additional Tips for WooCommerce Shipping Configuration

• Test Different Zones: If you ship to multiple regions, ensure each shipping zone has shipping methods configured correctly without overlap. Follow the steps in this tutorial to validate it.
• Check Plugin Conflicts: Sometimes, third-party plugins can conflict with shipping methods. Temporarily disable other plugins if necessary.
• Use Debugging Tools: WooCommerce has logging features for shipping issues. Enable debug logging for shipping to get more insights.
• Keep WooCommerce Updated: Regular updates fix bugs and improve compatibility, resolving unexpected shipping issues.

Conclusion

Properly configuring your WooCommerce shipping zones and methods is often the solution to resolving shipping methods that are not applied correctly.

Avoid creating separate shipping methods that conflict within the same zone. Instead, add multiple methods under one shipping zone with clear conditions.

By following these steps:

1. Identify and remove conflicting shipping methods.
2. Rename existing methods for clarity.
3. Add free shipping with the correct minimum order amount condition.
4. Verify the options on the cart and checkout pages.
5. Optionally set free shipping as the default method.

This simple trick ensures that your WooCommerce store displays the correct shipping options to your customers, improving their experience and enhancing your store’s credibility.

Please feel free to leave us a comment if you have any questions or require further assistance.

The post How to Fix Shipping Methods Not Working (Not Applying) in WooCommerce appeared first on PluginsForWP.

Letting your website’s visitors find the right branch for them, based on their needs, will keep them happy and improve your foot traffic.

This article will teach you how to use a plugin to add a store locator in WordPress.

Why Use Store Locator

Store locator plugins for WordPress use Google Maps to display the different locations of your business.

The Google Maps module has many excellent perks, such as different map views, geolocation, and directions to the nearest store.

In addition, clicking on a store location will open a modal window with relevant information about the specific branch. Some extra information can be hours of operation, phone number, or special instructions like where to park.

The extra information will reduce the number of questions your customers may have and save your workers valuable time so they can move on with their job tasks.

When the customer is ready to visit his chosen branch, he can click on the branch on his smartphone. Clicking on the store location will automatically open the Google Maps app, ready to navigate them to the destination.

• Search for stores or service centers by location or category
• Get directions easily via Google Maps integration
• Filter locations based on tags such as hospital, clinic, or retail store
• View detailed information like contact numbers, hours, and emails

This is an indispensable tool for driving foot traffic and improving customer satisfaction for businesses managing multiple outlets, clinics, or service points.

Integrating your website and Google Maps will improve your overall customer experience and brand reputation.

Store Locator Types

There are different ways to display store locators on a map on your website. One option requires working with Google Maps and, therefore, using their API, and the second one doesn’t.

This tutorial will show you both ways, and you can choose your desired one.

To use a Google Maps locator, we must install a dedicated plugin and generate a Google Maps API key.

• Generate the Google Maps API key.
• Install a store locator plugin.

Regardless of your plugin of choice, we will need to generate a Google Maps API key to display it on our site.

The following section will walk you through embedding a store locator map using Google Maps. If you would rather do it without Google Maps, jump over to this section.

Method #1: Store Locator With Google Maps

Displaying Google Maps on our WordPress website requires creating a unique API key.

Note: you must have a Google account with billing enabled to generate a key.

If you only want to display a few locations individually, you can bypass generating the API key process. The Divi article explains more about our embedded Google Map.

However, you must obtain a valid API key to enjoy any store locator plugins fully. Here is how you do it:

1. First, navigate to the Google Maps Platform website.
2. Then, click on the Get Started button.
3. Once inside the Google Cloud platform, click the Create Billing Account link and enter your payment details (Google asks for your payment details for safety reasons, and you won’t be charged automatically).
4. Navigate into the APIs & Services -> Credentials screen.
5. Click on the Create credentials button and choose the API key option.
6. A popup window will open up with your new API key.

Great, your API key is ready to be used. You can copy it to the clipboard. We will use it shortly, but let’s discuss store locator plugins.

Store Locator Plugin for WordPress

We can use multiple store locator plugins to embed a map on our website. They are all very similar in their features.

A store locator plugin will create two components:

• Dedicated custom post-type page for every store you’ll add.
• Search page with Google Maps to display some or all locations.

When choosing which store locator plugin to use, consider all the plugin’s features.

We tested the store locator plugins using YITH, wpexpertsio, and agilelogix. They are all excellent choices. However, we prefer the WordPress store locator plugin by weLaunch.

The WordPress store locator plugin has many great features to help us style maps and create advanced filters and categories for every store.

In addition, it can easily integrate with your WooCommerce store and let your visitors check if a particular product is in stock and in which location.

More on that later, but let’s install the plugin for now.

Install the Store Locator plugin for WordPress

First, we must install and activate the store locator plugin on our website.

You can download the store locator plugin from the official Welaunch website or us for only $4.99.

The downloaded zip file contains two plugins: the weLaunch Framework and the store locator plugin. We need to install and activate both.

From your WordPress website, navigate to Plugins -> Add New -> Upload plugin and install the weLaunch framework plugin first.

Once activated, repeat the process and install the store locator plugin.

Once both plugins are active, we can enter the Google API key we generated in the last step.

To do that, navigate to Store Locator -> Settings -> General, fill in the Google API key field and save the changes.

After saving, move on to the next step and create store categories and filters.

Categories and filters

WordPress taxonomies, such as categories and tags, can help us filter the results and find the right branch based on users’ needs.

If all your locations are identical, adding categories and filters is optional and not required.

For example, let’s take an individual who owns a few food industry businesses. One stream of his can be dining-in restaurants with a full-blown menu, while a different company can be coffee shops that only serve coffee with limited menu options.

In a case like the above, it will be wise to assign different categories to the businesses. For example, one category can be ‘Restaurants,’ while the other is ‘Coffee Shops.’

To create new categories, navigate to Store Locator -> Categories, enter a category name, and click the add new category button.

Once added, you’ll see all the category names on the right side.

Categories are helpful for more complex types of businesses, and in most cases, you probably won’t even need to create different varieties.

If all your locations operate similarly, with minor differences, it’s better to use filters instead.

Let’s retake our coffee shop example and assume all locations have the same menu but different features. For example, one place can have Wifi while the other doesn’t. Another branch can be pet-friendly while others aren’t, and so on.

Letting our customers filter the locations on the map based on their specific needs will make deciding which branch to go to much more straightforward.

To create filters, navigate to Store Locator -> Filters and enter your desired parent filters.

Only the second-level filters will be shown as checkboxes inside the store locator. The first-level filters will be used as the filter top names.

In our example, we will create a parent filter named ‘Features’ and enter Wifi, parking, pet-friendly, and delivery.

Great job. When our list of filters is ready, we can move on to adding store locations.

Add store locations

We reach the fun part, where we can add store locations.

Every store you add will be registered as a custom post type and have its page.

To create a store, navigate to Store Locator -> All Stores and click the New Store button.

Adding a new store is similar to creating any other custom post type, such as a WooCommerce product.

You’ll need to add a title, description, and other details unique to stores, such as an address, contact information, and hours of operation.

Let’s continue with the same scenario and add a new coffee shop location.

The title can be the address itself or a short description of the place—something that differentiates this location from the others. A title like ‘iBean Waterfront’ will work great.

Then, keep adding the other relevant information asked on that page. For example, fill in descriptions, addresses, and operation hours.

Enable all the features this location offers on the right sidebar, such as parking and Wifi, and set a featured image.

Publish the store and repeat the process to add additional stores when done.

Once we have entered all addresses, it’s time to display the map with pins for each location.

Display the map with the store’s locations.

We will need to use the plugin’s native shortcode to display the Google Map with the various locations we entered.

Thus, create a new page, enter the [wordpress_store_locator] a Gutenberg shortcode block, and click on publish.

Once published, visit the page to view what the map looks like. The sidebar with the search bar, filters, and store locations will be positioned on the left, while the map with pins will be placed on the right.

The client must enable the browser to use his current location or enter one manually inside the address field.

Then, the map will display a pin with your location and all the available stores near you in the distance range.

Feel free to test the filters by selecting your desired options and waiting for the map to update with the relevant results.

You can also hover over the store in the search results to see its location on the map and more details, such as an address and phone number.

Once everything works as expected, we can keep moving and customize the map’s look and functionality.

Customize the Store Locator Plugin

One of the reasons why this store locator is our plugin of choice is thanks to the unlimited options to style and customize every aspect of it.

You can modify every part of the plugin by navigating to the relevant tab inside the Store Locator -> Settings screen.

Because we can tweak so many different settings, it is impossible to cover them all. However, we would like to point out some.

Layout

You can change the default layout of the store locator shortcode to a different template or a custom design.

Navigate to Settings -> Layout, and choose one of the many other available options.

Map height

By default, the map’s height is automatically determined by the height of the search results. You can keep only a few locations.

However, to make it more visually appealing, I recommend setting a maximum height instead. To do so, navigate to the map tab, uncheck the map auto height box, and set a specific number.

Another option you may like to change on this page is the distance unit. The default is KM, but you can change it to miles.

Data to show

When hovering over a location from the search results list, a popup window displays extensive information about the store.

Some of the data is irrelevant and better to be left out. In my opinion, the full description of each store is unnecessary and, therefore, should be hidden.

You can decide what to display or hide inside the data to show the tab. Many options are checked by default, but you can uncheck them based on your preferences.

Single store page

As mentioned earlier, every store has a designated page with its URL. The store page displays all the information you entered, including descriptions, hours, and featured images.

Navigate the single store page tab and uncheck the boxes if you want to hide some elements.

Alternatively, you can disable the single store page altogether. The stores will still be displayed on the map, but clicking on them will not open the store page.

There are so many more options than you can change. I recommend you review them and adjust them based on your business requirements.

Save the changes and revisit the store locator page to test the results.

Method #2: Store Locator Without Google Maps

The StoreLocator WP plugin is a robust solution that utilizes Mapbox maps instead of Google Maps. It provides a competitive alternative with attractive pricing and features.

The plugin allows you to manage your store data efficiently through a Google Sheet, which syncs with your WordPress site.

This means you only need to maintain your store locations in one place, and the plugin automatically updates your website’s store locator map.

One of the significant advantages of this plugin is its simplicity and speed—no complex coding or map API configurations are required.

It also comes with a free plan, which limits map loads and searches, making it ideal for small—to medium-sized businesses. Upgrading to a paid plan unlocks additional features and higher usage limits for larger enterprises.

Step 1: Install the StoreLocator WordPress Plugin

Begin by logging into your WordPress dashboard. Navigate to the Plugins section and click on Add New. In the search bar, type Store Locator and look for the plugin developed by Micro. Company. Click Install, then Activate the plugin.

Step 2: Install the Store Locator Google Sheets Add-On

The plugin requires a Google Sheets add-on to manage your locations easily. Head over to the store locator site and click on the link to download the Google Sheets add-on. This takes you to the Google Workspace Marketplace, where you can install the add-on by connecting it to your Google account and granting the necessary permissions.

Step 3: Set Up Your Store Locator Map in Google Sheets

Open a new Google Sheet. In the menu, click Extensions, navigate to Store Locator Map, and select Get Started. This action populates your sheet with sample data and automatically matches columns to the appropriate data fields, such as store name, address, phone number, etc. You can adjust these mappings later if needed.

Next, select a primary color for your store locator map that matches your brand’s theme. Click Get Map to generate your store locator. Once done, click Open Map to view the locator in a new tab. This URL is your unique store locator link.

Step 4: Link Your Store Locator URL to WordPress

Return to your WordPress dashboard and navigate to the Store Locator plugin settings. Paste the store locator URL you copied from Google Sheets into the required field. You must also define a path for your store locator page, such as location. This path determines where the store locator will be accessible on your WordPress site.

You can add this path as a menu option under your theme’s customized options for better user navigation. For instance, linking it to a “Visit Us” button in your menu makes it easy for visitors to locate your store.

Step 5: Create and Customize the Store Locator Page

The plugin automatically creates a Store Locator page under your WordPress Pages. You can edit this page to change the title or add additional content that better suits your website’s style and messaging. After making changes, update the page and reload it on the front end to confirm your edits are reflected correctly.

Step 6: Add Your Actual Store Locations in Google Sheets

Now comes the critical part: entering your real store data. In your Google Sheet, replace the sample information with your business locations. For each entry, include:

• Store or location name
• Street address
• State or region
• Country
• Contact number
• Email address
• Business hours
• Any other relevant details

After adding or updating your locations, navigate to Extensions → Store Locator Map and click ‘Update Map.’ This action generates the geographic coordinates (latitude and longitude) required for accurate map placement.

Step 7: Verify Your Store Locator on WordPress

Please return to your WordPress store locator page and refresh it. You should now see all your newly added locations on the map, each with its marker. The store locator features search functionality, enabling users to locate locations by name or apply filters, such as hospitals or clinics. Users can also get directions directly to any location via Google Maps integration.

Advanced Features and Customization

The Google Sheet format is flexible. You can add columns for more information about each location, such as special services or tags. In the plugin settings, specify which columns are active and mark them accordingly (for example, which column contains the phone number or email address). This enables the store locator to display more detailed information to your visitors.

You can also create custom filters based on tags or categories to help users effectively narrow down their search results.

Customizing Colors and Appearance

The store locator’s appearance can be tailored to match your website’s branding. In the settings, you can specify a custom HEX color code to change the primary color of the map markers and interface elements.

Conclusion

This article taught you how to use the store locator plugin on your WordPress website to display all your store locations.

By following the simple steps outlined—from installing the plugin and Google Sheets add-on to customizing your locator page and adding your store data—you can have a fully functional and visually appealing store locator up and running on your WordPress site in just a few minutes.

Leave us a comment, and let us know if you have any questions regarding the process. We will be happy to help as much as possible.

The post How to Add a Store Locator for WordPress in Less Than Five Minutes appeared first on PluginsForWP.

Besides being unuser-friendly, a cart page without items will ultimately cost you revenue.

When the user removes items from the cart, there is a better chance for him to navigate away from your website afterward. To prevent it from happening, it will be better to direct them to some of the products that may interest them.

Please take a look at our website, for example. When you try to load our checkout page plugins-for-wp.world/checkout when it’s empty, you’ll be redirected to our subscription page.

By doing so, I focused your attention on our available plans rather than giving you the option of where to go next, saving you valuable page load time.

This tutorial will redirect WooCommerce and Easy Digital Downloads empty cart pages to different pages.

Both codes below must be pasted in the functions.php file of your child theme or a site-specific plugin. Read our article and learn how to create a custom site-specific plugin in WordPress.

Please apply the functions below to a child theme and remember to back up WordPress before editing core files.

Redirect an Empty Checkout Page in WooCommerce

If you’re using the WooCommerce plugin to sell your goods, use the code below:

add_action("template_redirect", 'redirect_empty_checkout_woocommerce');
function redirect_empty_checkout_woocommerce(){
    global $woocommerce;
    if( is_cart() && WC()->cart->cart_contents_count == 0){
        wp_safe_redirect( site_url( 'shop' ) );
    }
}

The code above will redirect the visitors from an empty checkout or cart page to the archive Shop page.

However, if you prefer to land them on a different page, such as a specific product or the pricing page, change the URL address from 'shop' to 'product/product-name/'.

Redirect an Empty Checkout Page in Easy Digital Downloads

If you’re using the EDD plugin to sell your goods, use the code below

add_action( 'template_redirect', 'redirect_empty_checkout_edd', 11 );
function redirect_empty_checkout_edd(){
	if ( is_page( edd_get_option( 'purchase_page' ) ) && edd_get_cart_quantity() == 0 ) {
        wp_safe_redirect( site_url( 'downloads' ) );
		exit;
	}
}

Like the WooCommerce redirection function, the code above will redirect the users to the archive Downloads page, where they can view all your available products.

If you want to set a different URL, change 'downloads' to your desired address, such as 'downloads/product-name/'.

Related Articles

• How to redirect WooCommerce after checkout.
• How to edit the WooCommerce checkout fields.
• How to change the WooCommerce button’s color.

Conclusion

This article teaches you how to redirect empty checkout pages in WooCommerce and Easy Digital Downloads to another page.

Let us know which code snippet you used to achieve that.

The post How To Redirect WooCommerce and EDD Empty Checkout Pages appeared first on PluginsForWP.

If the answer is yes, you probably know how frustrating and time-consuming it can be. Creating the order, prices, shipping address, and customer detail can be a hassle and energy drainer.

Sharing the cart link, already filled with the desired products, will save you valuable time to focus on other essential tasks.

In this article, I’ll show you how to add a cart sharing feature to WooCommerce.

Benefits to Share Cart Link

As we briefly discussed in the above section, saving time is only one of the benefits.

When a customer is placing an order over the phone, via a contact form, or an email, you’ll need to take extra information about them in addition to the items they are interested in.

Additional information can include their name, address, billing address, order notes, etc.

However, when using the cart-sharing feature, you’ll only need to retrieve the products they’re interested in. Then, once you have added the desired items to the cart, send them the cart’s link, and let them fill in the rest.

While going through the checkout process of your WooCommerce store, they’ll need to fill in the required fields on the checkout page themselves.

That way, you’ll minimize errors from miscommunication between you and the clients.

Some of the other pros why of using a cart-sharing link:

• Bulk discount – the store owner can share the cart link, already populated with a coupon code.
• Exposure – satisfied customers can easily forward the cart link to their friends or family, increasing sales and a higher conversion rate.
• Upsell – customers checking out inside your WooCommerce store (rather than paying an invoice) have a more significant chance to add additional items to the cart, increasing revenue.
• Minimize human errors – the customers can see what items they’re paying for before checking out and modify the order if necessary.
• Recover lost sales – by letting your customers save their cart, and return to the checkout process later.

A cart-sharing feature will improve the shopping experience for your customers while helping the store’s owner increase sales and revenue.

How to Add a Cart Share Feature to WooCommerce

Using the Cart Share plugin, you can add a cart share feature to WooCommerce.

By default, the cart-sharing plugin will automatically add the share button upon activating.

You’re golden if the basic settings are all you were looking for. First, however, let’s dive in and explore some of the plugin’s settings.

The Cart Share Plugin Options

The cart share plugin comes with many customization options. Let’s check some of them.

The Appearance tab will enable you to change the button and the popup style.

Consistency is one of the most vital cores of online businesses, and matching the button to your color scheme is smart.

Some other elements we can change are the background color, text color, close button, hover color, and many more.

You can change the button location and functionality inside the Basic Settings tab.

By default, the share cart button will appear to the right of the coupon field, but you can change its location from the dropdown list menu.

In addition, you can enable the option to save the cart and select the social media links inside the popup box.

Also, if you want to remove the Saved Cart tab from the account page, navigate to the My Account tab and delete the tab name value.

Please make sure to scroll down the page and click on the Save Changes button once finished.

Conclusion

This article showed you how to further optimize your WooCommerce shop by adding the feature to share the cart link.

We have many more optimization ideas that will help you increase sales and revenue; you can read them on the WooCommerce articles archive page.

Leave us a comment and tell us if you have any further questions regarding the plugin or need additional help setting it up.

The post How to Add a Cart Share Feature to WooCommerce appeared first on PluginsForWP.

Simplifying the shopping process for our customers can help them make the right decision much quicker and for us to increase revenue and start filling the order.

By default, WooCommerce product variations are displayed in a dropdown list that covers the different options from the view.

This is not a good practice for two main reasons:

1. The variations are hidden; the customer must click the dropdown menu to view the options.
2. Unfortunately, once clicked, the customer still may not see all the existing variations (such as colors), requiring him to scroll down.

Studies show a customer’s average time on a page is roughly 45 to 80 seconds. Therefore, considering that both reasons above will make the visitor spend valuable time, we should change and optimize it.

One of the most effective ways to make shopping more enjoyable is displaying all options in a swatches view.

Swatches will lay out all the product options, ensuring the customers see them all while speeding up the shopping journey process. That’s a win-win situation for the customer and the business.

We can change and convert the default variation dropdown list to buttons in multiple ways, and in this tutorial, we will focus on two.

Change the Dropdown List to Radio Buttons with a Function

In this first method, we will use a PHP function to change the default dropdown list to radio buttons.

You’ll need to paste the function below at the bottom of the functions.php file of your child theme.

Note: please back up your website before editing core files.

function convert_drowpdown_variables_to_buttons_woocommerce() {
	add_action( 'wp_print_footer_scripts', function() {
 
        ?>
        <script type="text/javascript">
 
        // DOM Loaded
        document.addEventListener( 'DOMContentLoaded', function() {
  
            // Get Variation Pricing Data
            var variations_form = document.querySelector( 'form.variations_form' );
            var data = variations_form.getAttribute( 'data-product_variations' );
            data = JSON.parse( data );
 
            // Loop Drop Downs
            document.querySelectorAll( 'table.variations select' )
                .forEach( function( select ) {
 
                // Loop Drop Down Options
                select.querySelectorAll( 'option' )
                    .forEach( function( option ) {
 
                    // Skip Empty
                    if( ! option.value ) {
                        return;
                    }
 
                    // Get Pricing For This Option
                    var pricing = '';
                    data.forEach( function( row ) {
                        if( row.attributes[select.name] == option.value ) {
                            pricing = row.price_html;
                        }
                    } );
 
                    // Create Radio
                    var radio = document.createElement( 'input' );
                        radio.type = 'radio';
                        radio.name = select.name;
                        radio.value = option.value;
                        radio.checked = option.selected;
                    var label = document.createElement( 'label' );
                        label.appendChild( radio );
                        label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );
                    var span = document.createElement( 'span' );
                        span.innerHTML = pricing;
                        label.appendChild( span );
                    var div = document.createElement( 'div' );
						div.className = "radioButton";
                        div.appendChild( label );
 
                    // Insert Radio
                    select.closest( 'td' ).className = "variationButtons";
					select.closest( 'td' ).appendChild( div );
 
                    // Handle Clicking
                    radio.addEventListener( 'click', function( event ) {
                        select.value = radio.value;
                        jQuery( select ).trigger( 'change' );
                    } );
 
                } ); // End Drop Down Options Loop
 
                // Hide Drop Down
                select.style.display = 'none';
 
            } ); // End Drop Downs Loop
  
        } ); // End Document Loaded
 
        </script>
        <?php
 
    } );
}
add_action( 'woocommerce_variable_add_to_cart', 'convert_drowpdown_variables_to_buttons_woocommerce' );

Once pasted, revisit the relevant product page to ensure the attributes have changed to radio buttons.

The structure’s look is based on your active theme and may look different from one to another.

You can also improve the section’s appearance with custom CSS to display it better.

Here are basic CSS rules to prettify the radio buttons. You can keep building on that based on your needs.

.variations, .variations th, .variations td {
	border:none;
}
.variationButtons {
	display: flex;
}
.radioButton {
	padding: 10px 15px;
	background-color: aliceblue;
	margin-right: 5px;
}
.reset_variations {
	display: none!important;
}

You must use a WordPress plugin if you want something more robust with additional options.

Change the Dropdown List to Swatches with a Plugin

We can use many decent WooCommerce plugins to convert the attributes list to buttons. However, this tutorial will focus on the Variation Swatches For WooCommerce plugin.

Upon activating the plugin, all the variations will be transformed from their current view to buttons.

That’s practical and saves us valuable time from individually changing it for each product.

The plugin’s free version is limited but still very useful. You can browse the different options by navigating to the Swatches Settings screen.

To get ideas and learn how to implement the different variations, navigate to the Swatches Settings -> Tutorial tab and watch the videos.

One example is to change the color variations from text to actual colors.

First, navigate to the Products -> Attributes screen, and edit the Colors attribute.

Then, change the attribute type from select to color, and update the changes.

Once updated, the product colors will be displayed in a simple color palette. We need to assign the right color to each option to change that.

Therefore, navigate to the Attributes screen, and click the Configure terms link.

Click edit under the desired color name, and use the color picker box to assign its color.

Once you have saved the changes, visit the product page, and verify that the attribute changed to the color you assigned to it.

You’ll then repeat the process and assign each variation its corresponding color.

If you’re interested in the pro version of the plugin, you can get it from the official developer or us for only $4.99.

Related Articles

• How to Reorder and Sort Product Attributes in WooCommerce
• How to Disable Image Zoom and Lightbox for WooCommerce Products
• How to Easily Change Default Sorting and Reorder Products in WooCommerce
• How to Add Additional Variation Images to Products in WooCommerce
• How to Change the Sale Badge Text and Color in WooCommerce

Conclusion

This tutorial taught you how to change the WooCommerce product attributes dropdown list into beautiful buttons.

Comment and tell us which method you used to achieve this task.

The post Convert Variation Dropdown Into Button Swatches for WooCommerce Products appeared first on PluginsForWP.

Zooming into a product image is often necessary to see more critical details. However, it’s unnecessary in other cases, and we should disable it.

This article will show you how to disable the zoom and lightbox preview for WooCommerce products.

Paste the functions below inside the functions.php file of your child theme. Please remember to back up your website before editing core files.

Disable Image Zoom in WooCommerce

We are all know and familiar with the zoom effect that every WooCommerce store has.

Hovering over a product image will enlarge the item to view it bigger.

To disable the zoom feature on single product pages in WooCommerce, navigate to Appearance -> Theme File Editor and paste this code at the bottom of the functions.php file.

remove_theme_support( 'wc-product-gallery-zoom' );

Once saved, refresh the product page and verify that the zoom feature was disabled successfully.

Keep reading if you’re interested in keeping the zoom option but want to disable the lightbox feature.

Disable Product Lightbox in WooCommerce

When clicking on a product’s image, the lightbox feature will open it in a gallery view.

That will help customers to get see more details about the desired item.

However, not all products need it, and the lighbox modal can be disabled easily.

Disabling the lightbox modal in WooCommerce is a simple process similar to the one above (image zoom).

From your WordPress dashboard, navigate to Appearance -> Theme File Editor, and paste this code at the bottom of the functions.php file.

remove_theme_support( 'wc-product-gallery-lightbox' );

Once saved, revisit the product page and click on the product’s image to ensure it was disabled successfully.

Conclusion

This article showed you how to easily disable zoom and lightbox for WooCommerce products.

If you would like to reverse the process in the future, delete the codes above from the functions file.

Please comment and tell us if you have any questions about the process.

The post How to Disable Image Zoom and Lightbox for WooCommerce Products appeared first on PluginsForWP.

Suppose you have a WooCommerce store and would like to offer your customers an option to design and customize products. In that case, we present an awesome WooCommerce product designer plugin, DesignO, which will spice up your print orders in 2023. Let’s learn more about it in detail. 

Innovating the Online Shopping Experience Instead of Improving 

Improving and innovating the online shopping experience are two different things. By focusing on innovation, we mean bringing new experiences to the market instead of updating and changing the ones we already have. 

In the past decade, worldwide eCommerce sales have increased by more than 380%, and online shopping is only likely to continue, resulting in a more competitive eCommerce landscape. As a result, companies must develop new ways to create great online shopping experiences to retain customers and increase sales.

Put yourself in your customer’s shoes and think, what triggers the purchase behavior in you? Is it the website design or accessibility? Or the customer service or product resources? No matter what it is, one thing is for sure, a great online shopping experience has the power to turn website visitors into loyal customers.

If you still aren’t prioritizing your online shopping experience, you’ll lose money to competitors who are one step ahead. Don’t want that to happen? Then it’s time to innovate your online shopping experience rather than just improving the old tricks. 

So, what makes a great online shopping experience? How can you innovate? Well, there are several ways to do so like; you can redo your website design, content, and functionality, offer a customer points and reward program, re-evaluate your mobile experience, add a chatbot and provide omnichannel support.

Still, among all, the trending and the most engaging way to attract customers is the addition of helpful and game-changing plugins like DesignO – a WooCommerce product designer that changes the course of buying a print product entirely with its customization and personalization features. 

The Evolution of Product Customization Features

Product customization has become a need, more than just a feature for every customer. Customization is going to new lengths, far beyond color choices and sizes. Manufacturers today are using data to produce items based on the unique attributes of the individual customer. 

The product customization feature has evolved drastically with many latest tools and technologies like smartphone apps and scanners, 3D printing, networked production, robotics, and high-speed connectivity and data transmission. As a result, it is spreading to various industries, including medical and dental implants. 

Introducing DesignO WooCommerce Plugin 

The market for product designer plugins is significant, and there are wide varieties available to choose from, but the central and common issue among all is the complex code structure. Since not everyone is tech-savvy, people prefer an easy interface that allows them to customize things readily, and that’s where DesignO WooCommerce Plugin comes into the picture. 

DesignO is a plug-and-play online design tool that is easy to use and lightweight. It has easy graphics and an interface that will allow your consumers to design and personalize things any way they like, whether you’re selling gift cards, clothing, mugs, accessories, etc.

It is a simple yet powerful WooCommerce product designer extension that enables your customers to add self-designed or customized things to your products and make changes according to their requirements depending on variable or simple products before placing an order in a WooCommerce store.

Features of DesignO WooCommerce Product Designer Plugin 

The customization feature is offered today by many, but only the simple and the fast one wins because that’s what people expect in any part. DesignO WooCommerce Plugin was designed keeping in mind that and hence is an efficient, robust, and intuitive plugin you will never find anywhere. So, let’s see what you gain by adding DesignO WooCommerce Plugin to your store. 

• Advanced Text Editing (edit font, size, and color) 
• 10,000+ Customizable Clipart
• Image & Clipart Editor
• Social Media Import & Sharing
• 2D/3D Preview
• Fully Mobile Responsive & Fast Loading
• Live Tier Pricing
• Multiple Products Ordering Using the Same Design
• Configurable Colors Palette
• Multilingual & Multi-Currency Support
• Ruler and Grid Lines
• White Color Removal
• Configurable output file resolution (up to 300dpi outputs)
• Feature-rich Back Office Software With Dashboard, Reports, Order Management, Print Workflow, and Job Calendar
• Pictures Extraction From Social Networks & Custom Files Upload 
• Advanced Design Pricing Based on Personalization
• Multiple image outputs (PNG, JPG)
• Save Designs for Later
• Templates Creation Available

They have created a video tutorial installing a DesignO Web to Print WordPress plugin into your WooCommerce store that you can watch below. 

How Your Company Can Benefit from DesignO?

The feature-rich DesignO is not just power-packed with benefits for customers but is equally beneficial for the store owner, which we will see in detail below. 

1. Builds Business and Improves Work Efficiency 

The advanced back office features in DesignO will help you build your business well but will also aid in running it well and smoothly.

For example, with an easy-to-use dashboard that will display all your customer orders in real-time, you can easily create jobs and push orders to the production department immediately, boosting your business and customer happiness to the next level.

Other than that, you will get a 360° view of your business, a complete order and job management solution, efficient print workflow tools, and a comprehensive job calendar, which is enough to turn your WooCommerce shop into a fully operational web-to-print storefront.

2. Enhances the Online Shopping Experience

Customer user experience is what decides the success of an online store. With DesignO, a satisfactory and happy online shopping experience is guaranteed because the intuitive online designer tool of DesignO is so easy to personalize products and place orders from any device that, once used, they will keep coming for more. 

3. Attracts New Customers

A happy customer won’t stay quiet. Customers share their shopping experience, good or bad, with everyone they know. Hence, with DesignO, since a customer’s shopping experience will undoubtedly be good, they will spread the word and bring in more customers for you. Thus, you don’t have to worry about attracting customers anymore. 

4. Increases Revenue and Allows You to Expand

The demand for personalized and customized products will not die anytime soon; hence, with DesignO, your WooCommerce store will run well and generate good revenue.

Moreover, although many free things come with DesignO, there are certain customization charges that you can apply for using elements such as photographs, clipart, text, words, and other such items.

And once your store is doing good, you can start selling various further printed products with personalized designs to gain profit. 

Conclusion

WooCommerce is unarguably one of the best platforms with great functionalities. However, adding an incredible plugin like DesignO for your print store will double and accelerate your chances of getting more print orders and, thus, success. 

Unlike other product designer plugins, DesignO is made for everyone meaning anyone without any prior design experience or tech knowledge can easily install and start using it without any external help or expert guidance.

In short, it is not just an editing tool but an overall product design and customization tool with many built-in features that efficiently manage orders and the entire business. 

So, if you want to spice up your print orders in the year 2023, you have to move and bring DesignO into your business before your competitors steal the thunder away from you. 

The post DesignO: WooCommerce Product Designer Plugin to Increase Print Orders appeared first on PluginsForWP.

If you’re a WooCommerce developer, you’ll need to access some or all of that information at some point or another.

Whether you’re developing a plugin, theme, or just a code snippet, knowing how to get the relevant product information is the key to success.

Once you access the $product variable, you can use any class object method.

Some of the product data you can get from the $product object is the item name, order, ID, SKU, price, stock level, order notes, etc. We can retrieve complete information about the item simply by getting the $product object.

For example, when a customer asks us to create a code snippet to disable a payment method for a specific product, we need to check if the item exists on the cart page and conditionally execute the function based on true or false.

This was just one scenario out of many possibilities, and you can find many more in some of the most useful WooCommerce functions.

Now that we know how essential the product object is let’s discover how to get the data from it.

Get Data from the $product Variable

Some additional arguments are passed through the function when working with WooCommerce hooks (actions and filters).

If you can use the $product object as an argument in the function, you’re golden. However, if the process doesn’t accept it as an argument, you’ll need to define the ‘global $product’ inside it to access all the object’s methods.

Once you’re ‘in,’ here is the product’s data you can get.

Get Product ID:

$product->get_id();

Get Product General Info:

$product->get_type();
$product->get_name();
$product->get_slug();
$product->get_date_created();
$product->get_date_modified();
$product->get_status();
$product->get_featured();
$product->get_catalog_visibility();
$product->get_description();
$product->get_short_description();
$product->get_sku();
$product->get_menu_order();
$product->get_virtual();
get_permalink( $product->get_id() );

Get Product Prices:

$product->get_price();
$product->get_regular_price();
$product->get_sale_price();
$product->get_date_on_sale_from();
$product->get_date_on_sale_to();
$product->get_total_sales();

Get Tax, Shipping, and Stock:

$product->get_tax_status();
$product->get_tax_class();
$product->get_manage_stock();
$product->get_stock_quantity();
$product->get_stock_status();
$product->get_backorders();
$product->get_sold_individually();
$product->get_purchase_note();
$product->get_shipping_class_id();

Get Product Dimensions:

$product->get_weight();
$product->get_length();
$product->get_width();
$product->get_height();
$product->get_dimensions();

Get Similar / Linked Products:

$product->get_upsell_ids();
$product->get_cross_sell_ids();
$product->get_parent_id();

Get Variations and Attributes:

$product->get_children(); // get variations
$product->get_attributes();
$product->get_default_attributes();
$product->get_attribute( 'attributeid' );

Get Product Taxonomies:

$product->get_categories();
$product->get_category_ids();
$product->get_tag_ids();

Get Product Downloads:

$product->get_downloads();
$product->get_download_expiry();
$product->get_downloadable();
$product->get_download_limit();

Get Product Images:

$product->get_image_id();
$product->get_image();
$product->get_gallery_image_ids();

Get Product Reviews:

$product->get_reviews_allowed();
$product->get_rating_counts();
$product->get_average_rating();
$product->get_review_count();

No $product Variable? No Worries!

If the hooks don’t accept the $product variable as is, you can still get to the object by adding another step.

The following sections will show how to retrieve the $product object from different variables and objects.

Access the $product Object from the $product_id

$product = wc_get_product( $product_id );
    
$product->get_type();
$product->get_name();
// etc.

Access the $product Object from the $order_id

$order = wc_get_order( $order_id );
$items = $order->get_items();
  
foreach ( $items as $item ) {
  
    $product = $item->get_product();
    
    $product->get_type();
    $product->get_name();
    // etc.
  
}

Access the $product Object from the Cart Object

$cart = WC()->cart->get_cart();
  
foreach( $cart as $cart_item_key => $cart_item ){
  
    $product = $cart_item['data'];
    
    $product->get_type();
    $product->get_name();
    // etc.
  
}

Access the $product Object from the $post Object

$product = wc_get_product( $post );
  
$product->get_type();
$product->get_name();
// etc.

Once you get into the $product object, you can use any of its methods from the first section.

Related Articles

1. How to set a default variation in WooCommerce
2. How to reorder products in WooCommerce
3. How to hide the WooCommerce additional information tab
4. WooCommerce: add back in stock notifications
5. Best name your price plugins for WooCommerce
6. How to change store currency in WooCommerce
7. Add additional variation images in WooCommerce
8. How to change the sale badge in WooCommerce

Conclusion

This article showed you how to access the WooCommerce $product object and use its data to expand the functionality of the WooCommerce plugin.

You can use it to develop a new plugin, theme, extension, or simple function.

Leave a comment and tell us what you use the $product object for or if you need further help.

The post How to Get Product Info (Price, ID, Name, Etc) from WooCommerce $product Object appeared first on PluginsForWP.

Adding a custom items department to your eCommerce store is one of the best and easiest ways.

With a print-on-demand service by Printful, you can add additional revenue streams without investing big bucks on stock or warehouse.

This article will teach you how to connect Printful with WooCommerce, so new orders can be placed on your website and processed through Printful.

What is Printful?

Printful is a print-on-demand US-based company that enables designers and business owners to create and sell their art on printable items such as clothes, aprons, coffee mugs, etc.

Benefits of using Printful:

• Show off your brand’s logo with custom merchandise to increase exposure offline.
• Total freedom for your customers to add custom names, numbers, images, or initials.
• Worldwide shipping – because Printful will fulfill the order made on your WooCommerce store, it is not limited to specific locations and can ship anywhere on the planet.
• A print-on-demand service saves you the need to invest starting capital on stock and storage. After completing the checkout on your WooCommerce store, the item will be printed and shipped on demand.

When combining all the benefits, there is no reason not to connect the two apps. It’s a win-win situation for your business and customers at once.

Your WooCommerce store will enjoy many new products carrying your business logo, and your customers will enjoy high-quality premium products printed by order and freshly made.

All the pros above make it a no-brainer for us to use the Printful WooCommerce integration and start selling custom products.

Which Businesses Can Use Printful

The businesses that can and should use Printful are not limited to a specific category or type.

While in the past, clothing stores were the only ones used to sell clothing or custom souvenirs, it’s no longer the case. Today, the customers’ demand to support the ideas and businesses that follow their core values is more significant than ever, making it an important opportunity to capitalize by entering this market.

The simplicity of connecting the WooCommerce plugin with Printful creates whole new opportunities to expand our store.

Whether you own a brick-and-mortar physical business like a coffee shop or provide services like a carpenter, start thinking about your next step and incorporate Printful with WooCommerce. 

Printful WooCommerce Integration Requirements

Integrating WooCommerce with Printful is a relatively straightforward and automatic process.

Some pre-conditions requirements need to be filled for the connection to succeed.

Before moving to the next section to learn how to use the Printful WooCommerce integration, follow the conditions below.

• Update WooCommerce to its latest version to ensure the proper function of all features.
• WooCommerce API will not work if your website’s permalink is set to ‘Plain.’ Navigate to the permalink settings page and change the default plain option to anything else, like the post name.
• Enable the WooCommerce Legacy API option to allow both apps to communicate with each other. Navigate to the plugin’s Settings -> Advanced screen, check the Legacy API option, and save the changes.

Once all the rules above are in place, keep reading about how to integrate Printful with WooCommerce.

Printful and WooCommerce Integration

We have already covered when and why to use Printful with WooCommerce. I assume that you sold on that.

This section will teach how to connect the two services with the Printful WooCommerce integration.

Although there are multiple services to connect WooCommerce with Printful, such as Zapier, the easiest is using the integration plugin. Therefore, that is my method of choice.

Once you walk through the connecting process and Printful communicates with WooCommerce, let’s test it and create a new product.

If Printful WooCommerce integration works as expected, any product we add to Printful will be automatically added to our eCommerce shop.

Create Products in Printful

Connecting WooCommerce to Printful is just the first step. We need to create a new product in Printful and display it automatically in WooCommerce.

Thanks to the connection plugin, adding a new product to Printful is enough, and the integration component to WooCommerce will do the rest.

Click on the Add product button to add a new product in Printful.

On the next screen, choose the custom products you want to add. You can select unlimited products from various categories, including clothing, accessories, coffee mugs, shoes, phone cases, etc.

Each product has its options and variables, depending on the item. For example, t-shirt-related options can be different sizes, while a coffee mug product will have a capacity in ounces.

Go through the different options for the product you selected, and when done, click on the Drop Your Design Here button to use a custom logo or text.

Once you have uploaded and finished setting up the product, click on the Proceed to mockups button.

On the main mockup screen, you’ll see what the product will look like in different colors, models, and poses. The mockup images on this page correlate with all the options you chose on the previous screen.

Next, you’ll need to enter a custom product description or leave it as-is and use their generated text. For your store’s benefit, I recommend you enter a unique explanation to prevent having duplicate content with another website, which will negatively affect your SEO.

In addition, verify that the product visibility option box is checked so that the product will appear in WooCommerce.

Finally, view the Printful price and expected revenue on the last screen.

If you want to adjust the numbers to serve your company better, click on the Set revenue button and decide your margin. Once you change the total revenue amount, the retail price column will adapt accordingly.

Lastly, click the Submit to store button to push the new product to WooCommerce.

View the Product on WooCommerce

This is the exciting part: visit your WooCommerce shop and view the freshly added product created with Printful.

You can access the product from the Printful dashboard by clicking on the View in WooCommerce link or going to the Products page.

Because the Printful integration still uses the WooCommerce product object, the page will look identical to any other product you added through WordPress.

Then, keep improving your WooCommerce store by hiding the additional information tab, adding swatches, and reordering the products.

If you need to edit or change any aspect of the product, you can use the native editor screen or go back to Printful to adjust it there.

When customers are ready to order, they will go through the WooCommerce checkout process without leaving your website.

On the checkout page, the store will honor the taxes and shipping methods you defined to match the other products.

After the customer finishes checking out, the order will be transferred to Printful, and they will start to fulfill the order at your convenience.

Conclusion

This article showed you how to connect Printful to WooCommerce using the integration plugin.

Opening your store to a new line of products can help you immensely by increasing exposure, eventually leading to new customers.

If you haven’t yet, I highly encourage you to create your Printful store and sell products with your brand’s logo.

Please comment and tell us what products you sell with Printful and WooCommerce.

The post How to Easily Connect Printful to WooCommerce with Integration Plugin appeared first on PluginsForWP.

This tutorial will show you how to use Elementor to edit your WooCommerce cart page.

What is the WooCommerce Cart Page

The WooCommerce cart page is the page that displays the items in your shopping cart. It allows you to view and modify the items in your cart and remove or change the quantities. 

You can also specify the shipping and payment information on this page.

The cart page is the first step out of the two-step WooCommerce checkout funnel and comes before the checkout page. 

When you want to customize the WooCommerce cart and checkout pages, you can use Elementor in several ways.

You can either create a new page and add an Elementor widget to this page, or you can use an existing page and edit it with Elementor directly.

Once you have the page, the process is essentially the same. Because WooCommerce will automatically create the cart and checkout pages after installation, we can skip the first step of creating a new page.

How to Edit WooCommerce Cart Page with Elementor

The first step is to install and activate Elementor on your WordPress website.

For maximum control over the cart page look, use Elementor Pro (you can get it from the official website for $49 or us for only $4.99).

Once activated on your website, navigate to the cart page and click on the Edit with Elementor button.

You can start adding widgets and customizing your WooCommerce cart page. There are many different widgets available in Elementor, so feel free to use them according to your needs. For example, you can use a Call To Action widget to encourage users to add items to their cart. 

After opening the Elementor editor screen, you can customize the cart page using the default WooCommerce shortcode [woocommerce_cart] or the dedicated cart widget of Elementor Pro.

Both ways will show the same cart content but with a slightly different look. This is because the shortcode will use the CSS rules of WooCommerce, while the cart widget will use Elementor’s stylesheet.

We will use the cart widget to take full advantage of customizing with Elementor.

By default, the cart will be displayed in two columns, the products list on the left and the checkout button will be on the right.

Use the different options under the Content tab to change the cart behavior and the Style tab to adjust its look.

If you want to change the cart to only one column, expand the General tab and change the Layout option to one.

Now, let’s style the cart. To do this, click on the Style tab in the top toolbar. Then, please select a style from the list of presets or customize it to match your needs.

For example, if you want to change the checkout button’ color, you can do so from the Style -> Checkout Button screen.

Please go through the different options and adjust them to fit the needs of your website and customers. Then, read the best practices below to improve the cart and checkout pages when finished.

WooCommerce Cart Page: Best Practices

When customizing your WooCommerce cart page with Elementor, you should follow some best practices to ensure a positive user experience.

First, make sure to use high-quality images and fonts in your design. This will help improve the overall look and feel of your page.

Second, keep your content concise and easy to understand. Users should be able to quickly scan your page and understand what it is about.

Third, use actionable buttons and CTAs to encourage users to add items to their carts or subscribe to your newsletter.

Finally, test your page on different devices and browsers to ensure it looks and works correctly.

Minimalistic Page Layout

Ensure your customers are goal-oriented and only focusing on completing their purchases by selecting a minimal page layout.

Unlike on other pages containing the full header, sidebar, and footer, removing all these destructions from the cart and checkout pages will be wise.

Therefore, click on the cogwheel icon on the bottom left side of the screen, and change the Page Layout option to canvas or full width.

The canvas template will remove the header and all the other page’s extras but keep the content.

The full-width template will keep the header and footer but will remove the page title.

If you still want a header and footer designed explicitly for the cart and checkout pages, I recommend creating a separate template.

Add Header and Footer to Cart

Thanks to the fantastic theme builder feature of Elementor Pro, we can quickly create any theme part, including the header and footer.

As mentioned above, both should be minimal without any destruction. Usually, these two funnel pages display only the site logo and secure checkout badges to increase buyer trust.

To create a custom header template, navigate to Elementor -> Saved Templates, and click on the Add New button.

Then, choose the header option, give it a proper name, like the cart and checkout, and click Create Template.

Add specific widgets like the site’s logo or name and a continue shopping button to return to the shop page.

When ready to be published, click the update button and set the display condition for the cart and checkout pages.

Then, revisit the cart page to ensure it looks and works as expected. Once done, repeat the process and create a dedicated footer template.

Customize WooCommerce Cart Page with the ShopLentor Plugin

ShopLentor (formerly WooLentor) is an Elementor extension created to add and enrich WooCommerce widgets.

The plugin was developed to specialize in working with Elementor and WooCommerce to design a better eCommerce experience. It has unique widgets to target any aspect of your stores, such as product, cart, and checkout pages.

Some of the many added ShopLentor widgets are:

• Product tabs
• Add banners
• Image marker
• Category list
• Customer review
• Image accordion
• Ajax search form
• Many more

Cross-sell is one of the most useful widgets you can add to your WooCommerce cart page. The cross-sell widget will add recommended products section with an option to add the items to the cart.

The recommended section will encourage customers to add additional products to their cart, improving the conversion rate and increasing revenue.

Once you activate ShopLentor Pro (get it from the official website for $49 or from us for only $4.99) on your WordPress website, add the Cross-sell widget to the cart page.

Then, to add custom recommended products, edit one of the cart’s products, and navigate to the Linked Products tab. Then, enter the items related to the current one and save the changes.

When done, revisit the cart to ensure you can see the products in the upsell section.

Premade Templates for WooCommerce Cart and Checkout Pages

One of the best advantages of the ShopLentor plugin is the premade templates that you can use to speed up the customization process.

You have ready-to-go templates for any WooCommerce page, such as product, archive, search, cart, and checkout pages.

To use a cart or checkout template, navigate to ShopLentor -> Template Library and the Cart options.

Browse between the many beautiful templates and import your desired design.

Once imported, navigate to ShopLentor -> Settings and choose the imported template for the cart page option.

After saving the changes, revisit the cart page to test it out. You can also add additional widgets if needed. 

You can also repeat the process and use a template with the checkout page. To do so, browse between the checkout templates and import your favorite one.

Then, set the desired template under the checkout page option inside the ShopLentor settings screen.

Finally, visit the checkout page and ensure it looks and works as expected.

Conclusion

This article taught you how to use Elementor to customize your WooCommerce cart and checkout pages in multiple ways.

Overall, customizing your WooCommerce cart page with Elementor is an easy and quick process that can benefit you immensely.

Just use different widgets according to your needs and customize them as needed. This will help you create a more appealing WooCommerce cart page that encourages users to add items to their carts and increase revenue.

Leave us a comment and let us know your method to achieve this task.

The post How to Customize WooCommerce Cart Page with Elementor appeared first on PluginsForWP.