Text over an image is the ultimate element because it covers a perfect section’s visual and textual aspects. It’s more effective to show a product’s photo with written information about its benefits. 

This article will show you how to add text over images in the Elementor page builder plugin.

Why Position Text Over Images

Text and images are the two primary components of every website. While each of them can be very effective on its own, combining them can skyrocket your results.

Here are the main reasons why to place text over images:

• Hero slider – Many websites’ hero sections feature sliders with a call-to-action button atop a background image.
• Emphasize critical points – writing about a service or product isn’t always enough. Displaying an image with relevant text can deliver a more explicit message.
• Image with hotspots – This is very useful for highlighting the advantages of a particular product. The hotspots will be strategically placed on the image, and hovering over them will expose relevant information.
• Efficient design – Occasionally, placing images next to or below the text can use valuable space on your website that will go to waste. Placing the reader over the image is a better practice for using the maximum available space.

Whether it is one of the reasons listed above or to better match your design needs, it’s beneficial to know how to place text over an image.

This article presents four different methods for displaying text over an image. The first two methods can be accomplished using the free version of Elementor, while the last two require Elementor Pro.

Let’s start with the first method by using the image widget.

Method #1: Display Text Over the Image Widget

This is my preferred method for positioning text over an image, especially when using the basic version of Elementor.

Although it requires some CSS code, it shouldn’t discourage you from trying it, mainly because I will provide it for you.

First, click the “Edit with Elementor” button to open the visual editor screen.

Then, drag the image widget from the left sidebar to your desired section on the right.

Choose your image under the Content tab and change the Caption field to Custom. Once changed, enter the custom text you want to display over the image.

You can also use the Style tab to change the size and font family, as well as add a background color to the caption.

When satisfied with how it looks, navigate to the Advanced tab and assign the textOverImage class to the widget.

Once you have updated the changes, open the customization screen and enter the Additional CSS tab.

Then, paste the CSS code below and click Publish:

.textOverImage figcaption {
position: absolute;
margin: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}

The provided CSS will position the caption in the center of the image. You can always re-edit the widget if you want to change the font size, color, or other settings.

Assigning a class to the image widget is only necessary if you are not using Elementor Pro. However, if you have the paid version, expand the Custom CSS tab and assign the code to the selector figcaption instead.

We will use the text widget with a background image in the following method.

Method #2: Text Widget with a Background Image

In our previous posts, I showed you how to set a background color or image to any page in Elementor. This method will use techniques we learned in the other article to accomplish similar results.

To start, drag either the Text editor or the Heading widget to the desired section on the canvas on the right.

After entering your custom text, center it and customize its properties, such as size and style.

Then, click on the Advanced tab, expand the background tab, and select the image to display behind the text.

For better results, set the image position to center-center, with no repeat and size to cover.

Then, expand the Layout tab and increase the padding values until you’re satisfied with the results.

Please remember to check the mobile view to ensure the style is consistent across all devices. You may need to adjust some of the properties for a better fit.

Up to this point, we used the accessible version of Elementor to display text over an image. The next couple of methods will show you how to do it with Elementor Pro (or you can get it from us for only $4.99).

Method #3: Text Over the Gallery Widget

The Gallery widget is a great way to combine images and text. It’s very similar to the first method I showed you above; however, we don’t need to use CSS this time.

First, drag the Gallery widget to the canvas on the right, and select the image you want to display.

Enter your custom text as the image’s caption, and then click the Insert Gallery button.

The gallery widget defaults to four columns, allowing each item to occupy 25% of the entire section. Therefore, change the column number to one and the image size to full.

Then, expand the Overlay tab and change the title field to caption. Once changed, hover the mouse cursor over the image to ensure the text is displayed.

Next, move on to the Style tab, expand the Overlay tab, and enter the Hover options. Here you can change the overlay background color or remove it altogether.

Finally, expand the Content tab, and style the text to fit your design expectations. Moreover, change the hover animation to none. That will ensure the reader is always displayed, even when the image is not being hovered over.

The Portfolio and the Posts widgets are similar to the Gallery widget, and you can achieve similar results by selecting any of them.

Method #4: The Hotspot Widget

The hotspot is a very cool widget often used to highlight key points of a product or a store locator indicator.

By default, the hotspot widget includes one hotspot in the middle of the image, but you can change its position and add as many as necessary.

After selecting the image, expand the Hotspot tab and change the properties of the first item.

Then, move on to the Position tab and adjust the vertically and horizontally offset values to the correct position.

You can then add additional text items to be displayed over the image and assign different values to each of them.

Once added, move on to the Tooltip tab if you want to change the tooltip’s position and trigger condition.

Of course, similar to any other Elementor widget, you can change any aspect of the widget’s look from under the Style tab.

When satisfied with the result, please save the changes and test them on the live site.

Conclusion

Showing text over images is an excellent feature every website owner should be familiar with. This article showed you how to position text over an image using Elementor in four ways.

Leave us a comment and tell us which of the methods above you used to achieve this task.

The post How to Add Text Over an Image in Elementor in Four Different Ways appeared first on PluginsForWP.

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.

If you want to make your limited-time offers more compelling, automatically closing a popup after a set number of seconds can be a game-changer.

In this comprehensive guide, I’ll explain how to set up an Elementor popup that closes after a timer runs out.

This method suits countdown offers, exit-intent popups, and upsell funnels. It gives your visitors a clear call to action and a ticking clock that adds pressure to act quickly.

Why Use an Automatically Closing Popup?

Before diving into the technical steps, it’s’ essential to understand why you might want to use a timed popup that closes automatically:

• Create Scarcity: When visitors see a popup that lasts only a few seconds, they feel urgency and Scarcity. They know the offer is limited, encouraging faster decision-making.
• Improve Conversion Rates: Time-limited popups can increase conversions by prompting immediate action rather than letting visitors procrastinate.
• Control User Experience: Automatically closing popups prevents annoyance and popup fatigue by ensuring the popup doesn’t’ linger forever or require manual closing.
• Upsell and Funnel Optimization: In sales funnels or cart upsells, limiting the availability of an offer with a popup timer can boost average order values.

Let’s explore how to set this up yourself using Elementor and a simple code snippet.

Step-by-Step Guide to Closing an Elementor Popup Automatically After a Timer.

Create or Edit Your Elementor Popup

Start by opening Elementor and creating a new popup or editing an existing one. I used a simple popup with a timer set to six seconds for this tutorial. You can customize the popup content however you want—this could be a special offer, a lead capture form, or an announcement.

When setting the timer for your popup, you have flexible options.

Depending on your campaign needs, you can set it to count down from seconds, minutes, hours, or even days.

For scarcity-driven offers, shorter timers —such as 30 seconds to 2 minutes —work best, creating a genuine sense of urgency.

Add the HTML Block with Custom Code

Next, drag an HTML widget into your popup layout. This is where you will paste a small snippet of JavaScript code that controls the timer and closes the popup automatically once the time is up.

Here’s the essential part: you must adjust the timer duration in the code to match the desired duration. The timer is set in milliseconds, so, for example, 6000 milliseconds equals 6 seconds. If you want a 10-second timer, change this number to 10000.

Here is the exact code snippet for easy copying and pasting. Just replace the number in the code with your desired duration:

<script>
setTimeout(function(){
    document.querySelector('.dialog-lightbox-close-button').click();
}, 6000)
</script>

This script waits for the specified time and then triggers Elementor’s’ popup close function. It’s’ lightweight and practical.

Display and Publish Your Popup

Once you have set the timer and the code in place, ensure that you configure the popup display settings to target the correct pages or user actions. This could occur on page load, exit intent, or another trigger that aligns with your campaign goals.

After setting your display preferences, publish and test the popup to ensure it behaves as expected.

Testing Your Popup in Incognito Mode

One important note is that if you test the popup while logged in to your WordPress admin, the timer may not function correctly because Elementor often turns off specific scripts for logged-in users. To get an accurate test, open your site in an incognito or private browsing window to see how the popup appears and closes after the timer expires.

Prevent the Popup from Reappearing After Closing

By default, refreshing the page causes the popup to reappear, which can defeat the purpose of creating Scarcity. Elementor has an advanced rule called “Show up to X times” to fix this. Set this rule to 1 so the popup only shows once per visitor session.

This ensures that once a visitor closes the popup (or it closes automatically after the timer), it won’t bother them again on page refresh or subsequent visits during the same session. This is crucial for maintaining a positive user experience while creating a sense of urgency.

Turn off the Close Button for Maximum Scarcity

If you want to ensure you can’t bypass your timed offer by manually closing the popup early, you can turn off the close button entirely. This forces them to act within the timer window or wait until the popup closes automatically.

To do this, go to your popup settings and turn off the close button. After saving, your popup will no longer have a manual close option, increasing the pressure to engage with the offer before the timer runs out.

Tips for Using Timed Popups Effectively

• Keep it Short: Keep the timer under 2 minutes for scarcity offers. Longer timers reduce urgency.
• Clear Call to Action: Ensure your popup clearly explains the offer and instructs the visitor on the next step before closing.
• Use Cookies or Session Storage: Consider using cookies or session storage to track whether a visitor has seen the popup so you don’t repeat visitors.
• Test on Multiple Devices: Ensure the popup behaves well on both mobile and desktop devices, particularly with timers and automatic closing.
• Combine with Other Triggers: Use exit intent or scroll percentage triggers to show the popup at the best moment.

Conclusion

Automatically closing an Elementor popup after a few seconds is a simple yet powerful way to drive urgency and improve conversions on your WordPress site.

With just a bit of custom code and the proper popup settings, you can create a one-time offer that visitors must act on promptly or risk missing out.

By following the steps above—setting your timer, adding the JavaScript code, limiting popup reappearances, and optionally turning off the close button—you’ll have a professional, scarcity-driven popup ready to enhance your funnels and promotions.

Feel free to leave questions or comments if you need help implementing this tutorial on your site.

Remember, the key to success with timed popups is testing and tailoring the experience to your audience’s behavior and preferences.

The post How to Automatically Close an Elementor Popup On a Timer (After a Few Seconds) appeared first on PluginsForWP.

Because the header typically contains the website’s most valuable links, it is essential to keep it visible as much as possible.

However, in some cases, you’ll want to change the header’s structure or design on scroll to compliment the page.

The changed header can be a different background color, elements order, minimized height, or anything else.

This tutorial will show you how to change the Elementor header when scrolling the page.

How to Change the Header in Elementor

Changing the website header requires combining a few steps, such as jQuery and CSS.

Once we understand the steps, let’s dive in and see how to change the header.

Create a Header Template

Creating a header template in Elementor allows you to design a custom header for your website. Thanks to Elementor’s user-friendly, drag-and-drop interface, the process is straightforward.

From your WordPress dashboard, go to Templates > Theme Builder.

In the Theme Builder, you’ll see different parts of your website that you can design. Choose the header.

Once the Elementor editor screen is loaded, choose pre-made templates or build them from scratch.

The fixed header that should be displayed at the top of the page will be the first section, while the default header will be the second section.

Prepare the Replace Header

Once we finish designing both headers, we can proceed to the next step and assign an ID.

We need to use jQuery (or JavaScript) to manipulate the visibility of the replacing header. To do that and differentiate between the two headers, let’s assign a unique ID to the fixed header.

So, click on the changing header section, navigate to the Advanced tab, and enter headerOnScroll inside the ID field.

Then, under the same tab, change the Position to Fixed and fill the z-index field with a high value like 99.

A high z-index value will ensure that the header will be displayed on top of the other sections of the page rather than behind them.

Once done, publish the header template and set the displaying conditions based on your needs.

Applying the jQuery to Change the Header

Changing a website header on scroll typically involves using JavaScript (or a JavaScript library like jQuery) and CSS to modify the header’s style or content based on the page’s scroll position.

The general idea is to listen for the scroll event on the window or document, check how far the page has been scrolled, and then apply changes to the header based on that scroll distance.

I already created the jQuery and CSS codes to simplify your life.

To apply the code, navigate to Elementor -> Custom Codes -> Create new.

Then, please copy the code below and paste it inside the custom code screen.

<script>
  (function ($) {
  $(document).ready(function () {
    var headerOnScroll = $('#headerOnScroll');
	var headerOnScrollHeight = headerOnScroll.height();
	headerOnScroll.css( 'transform','translateY(-'+ headerOnScrollHeight +'px)' );
	$(window).scroll(function() {
		if($(this).scrollTop() > 300){
			headerOnScroll.addClass('showNewHeader');
		}else {
			headerOnScroll.removeClass('showNewHeader');
		}
	});
  });
  })(jQuery);
</script>

<style>
#headerOnScroll.showNewHeader {
transform: translateY(0) !important;
}
</style>

You can change the 300 number in the code to control when the new header is displayed when scrolling down from the top of the page.

Once you’ve completed this, save the custom code and execute it on all pages (or all the pages where the header is presented).

Then, visit your website and ensure the Elementor header changes successfully.

Changing Header Troubleshooting

In most cases, with most themes, the steps we took up to this point will ensure that the fixed header is hidden on page load and behind the default header.

However, if on page load, you can still see both headers or a glimpse of the fixed header before it disappears, you can fix it in two ways:

1. Ensure the default header has a higher z-index value than the top header. For example, if we set the z-index value of the top header to 99, we should set the default header z-index value to 999.
2. Change the custom code executing location from the default <head> tag to </body> - End inside the custom code screen in Elementor.

Once you corrected the above two possible issues, save the changes and retest the header to ensure it changes on scrolling.

Conclusion

This tutorial showed you how to change the header in Elementor easily.

There are several reasons to change the header, some design-related and others practical. Whatever the reason, this tutorial showed you how to do it.

The post How to Change Elementor Header on Scrolling appeared first on PluginsForWP.

They are key-value pairs that can be associated with individual posts, pages, and products that provide a way to extend the default content structure.

Enabling the default WordPress custom fields with WooCommerce can be very beneficial for displaying additional data and product information.

This tutorial will show you how to add and display the default WordPress custom fields in your WooCommerce store.

Why Use Custom Fields with WooCommerce

As mentioned above, custom fields will allow you to add extra information about the products to your customers.

Transparency is vital between the store owner and the customer relationship.

One way to be transparent is by laying out and presenting all the information about the products.

In addition, minimizing the visitors’ questions and support tickets is another excellent advantage of using custom fields with WooCommerce.

Every eCommerce shop owner should aim to provide customers with the most straightforward and quickest sale process; displaying all the relevant information is a significant step in that direction.

Think about it that way: if some data is missing from the products’ pages, your store’s visitors interested in purchasing the product will need to contact you first to clarify. When you respond, they have already left your store or bought it from your competitor’s website.

Adding custom fields to products efficiently smooths the selling funnel and helps customers make better decisions.

How to Enable Custom Fields in WooCommerce

WordPress custom fields are already enabled for WooCommerce products by default.

Although they are not presented on the page, they are still enabled. We will need to toggle the option to display them.

To do that, navigate to any product page, click the Screen Options tab, and check the Custom Fields box.

Once checked, scroll down under the product’s description section to see the custom fields area.

Note: sometimes, you must refresh the page after enabling the custom fields box to see the section.

To add a field, choose your desired key name option from the drop-down list on the left, enter its value in the value field, and click the Add Custom Fields button.

To add a custom field, click Enter new, set your custom name and value, and click the Add button.

After adding the custom field, click the Update button to save its values in the database.

Adding custom fields to WooCommerce is the first step out of a two-step process. Next, we should display the custom fields on products’ pages and make them available to our visitors.

How to Display Custom Fields in Product Pages

There are three ways to display the custom fields on WooCommerce product pages:

1. In the theme’s file with a PHP function.
2. Using WooCommerce hooks.
3. With shortcodes.
4. Using a page builder, such as Elementor.

Whatever way you choose will do the job right, and selecting the method is based on your preference.

In the Template File

You can display custom fields on any page, post, or custom post type. Because this article focuses on WooCommerce, we will use the product template file.

Often, WooCommerce uses the single.php file to generate the product pages, and we can access that file by using an FTP or straight through the theme file editor screen.

However, based on your theme, there may be a dedicated template file for WooCommerce products instead of the single.php one.

I recommend you first paste the code in the single.php file and verify it’s working. If it doesn’t work, Google which template file your theme uses to generate the product pages and paste it there.

So, paste the function below in the desired location inside the template file:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Make sure to replace the KEY value with the actual name of the custom field.

Once saved, visit the product page that contains this field and verify that it is displayed on the screen.

Depending on your needs, you can add some text before or after the field like so:

<p>Text before <?php echo get_post_meta($post->ID, 'aquarium size', true); ?> text after</p>

The fields will be displayed on every product page, regardless of whether it contains it. To show it only on product pages that have the field, use the condition function below:

<?php
 if(get_post_meta($post->ID, 'key')){ ?>
 <p>Aquarium size: <?php echo get_post_meta($post->ID, 'key', true); ?></p>
<?php } ?>

Remember to change the key attribute with the actual custom field’s name.

WooCommerce Hooks

WordPress hooks are another helpful way to add content to some page parts.

Inserting content through hooks saves us from modifying the store’s templates, and by doing that, it simplifies the process.

WooCommerce has many hooks throughout the product page, and you’ll need to choose the desired one based on where you would like to display the data.

Please paste the hooks’ functions in the functions.php file of your child theme. Make sure to back up your WordPress website before you modify its core files.

function display_custom_field_woocommerce() {
global $post;
?>
<p><?php echo get_post_meta($post->ID, 'key', true); ?></p>
<?php
}
add_filter( 'hook-name-goes-here', 'display_custom_field_woocommerce' );

Remember to change the hook-name-goes-here with the actual WooCommerce hook and the Key with the exact custom field name.

Like the method above, you can also add a condition to check if the custom field exists before printing its value into the page.

With a Shortcode

Shortcodes are one of the easiest and most common ways to display data on a page; therefore, we all love them.

Using shortcodes provides us with complete freedom of where we would like to display it by using Gutenberg blocks, classic and code editors, and page builders.

There is no option to display custom fields with shortcodes, but we can add a simple code to create it.

To do that, copy the code below at the button of the functions.php file of your child theme and save the changes.

// display custom fields with shortcodes
add_shortcode( 'field', 'shortcode_field' );
function shortcode_field( $atts ) {
	extract( shortcode_atts( array(
		'post_id' => null,
	), $atts ) );
	if ( ! isset( $atts[0] ) ) {
		return;
	}
	$field = esc_attr( $atts[0] );
	global $post;
	$post_id = ( null === $post_id ) ? $post->ID : $post_id;

	return get_post_meta( $post_id, $field, true );
}

Then, edit one of your product’s pages and use the shortcode field to display the desired custom field. Remember to change the text with the actual custom field name.

Once saved, visit the product page to ensure the custom field value was successfully added.

Elementor Dynamic Data

Page builders were made to make our designing life more accessible, and they managed to do it in this case once again.

Because most of us use a page builder, such as Elementor Pro, displaying custom fields may be the easiest, especially when building the product page with their theme builder feature.

Click on Edit with Elementor to open the single product template page and drag a new Text Editor widget into your desired location.

Then, click the Dynamic Tags icon and choose the Post Custom Field option to replace the default static content with the custom fields.

Enter the custom field name in the Custom Key value and verify that the content is being displayed on the screen.

You can also add text to appear before and after the field value. To do that, click the Advanced tab and add your desired text.

Save the changes again, and visit the live product page to see the content.

WooCommerce Custom Fields Plugins

Adding the native WordPress custom fields option to WooCommerce is one way out of many to display custom fields.

Plenty of dedicated plugins help you achieve more accurate results without using codes.

In one of our other posts, we showed you how to use a plugin to add custom fields to the WooCommerce checkout page and let customers fill them in before completing a purchase.

Other well-known plugins to add custom fields to WooCommerce are Custom Fields for WooCommerce, Advanced Custom Fields, and Admin Custom Order Fields. You can find them, and many more, in our store.

Each plugin has pros and cons; you can test them to determine which fits your needs.

Conclusion

This article showed you how to add custom fields to WooCommerce product pages.

The more information, the merrier, and providing your customers with all the data will simplify and speed up their decision to purchase.

In addition, it will save you hours of valuable time responding to support questions, which you can use to improve your store in other ways.

The post How to Add and Display Custom Fields in WooCommerce Product Pages appeared first on PluginsForWP.

The rest of the tabs are closed. You’ll need to click on each to open and view their content.

If you want the first tab closed on default for aesthetic, design, or any other reason, you won’t find the option to do it through the plugin’s edit panel.

However, setting the accordion widget closed on page load is still possible using a simple script.

This tutorial will show you how to set the Elementor accordion widget closed by default.

How to Default Close Elementor Accordions

Elementor widgets generate the content with HTML elements added to the screen.

Each section or element gets its own set of body classes based on your assigned settings.

The CSS and JavaScript files are fired on page load, and the design or behavior for each element is applied based on its class.

While inspecting the accordion HTML element, you’ll notice that the elementor-active class triggers a specific behavior.

To close the accordion by default, we must run JavaScript code to remove that class.

We will cover all scenarios of how to close the accordions:

• Single accordion
• All accordions together
• Specific accordions only

Let’s start with the first option, close a single accordion,

Default Close a Single Accordion

This method is perfect if you only want to close a single accordion on a page.

In this case, drag an HTML widget above the accordion widget, and paste this JavaScript code inside.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Save the changes and reload the page to ensure the accordion is closed.

You may see it open for a split second until the JavaScript file executes and close it.

Close All Elementor Accordions by Default

If you want to close all current and future accordions on your website, you’ll need to fire the same code above from your header template.

You can place the code above in your template files by using any code snippet plugin or the Custom Codes option of Elementor Pro.

You can read more about the different options in our Add JavaScript to Elementor article.

With Elementor Pro, navigate to the Custom Codes screen and click Add New.

Give the code snippet a name, paste it inside the code box, and publish it.

Once published, revisit any page with accordion and verify it’s now closed by default.

Default Close Specific Accordions

We understand that, in some cases, you would like to have some accordions closed while others can stay open.

We’ll need to assign a unique class name to the accordions we want to close by default, to differentiate them from the others.

First, click on the Advanced tab of the accordion widgets you would like to close, and enter closeAccordion in their CSS Classes box.

Then, create a custom code in Elementor Pro, paste the following code inside, and save the changes.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.closeAccordion .elementor-tab-title').removeClass('elementor-active');
 $('.closeAccordion .elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Once saved, refresh any page containing an accordion widget with the closeAccordion class and verify it’s closed now.

You can also check the other accordion widget without the added class and verify that it functions as usual.

Troubleshooting if Accordion is Not Closed by Default

The JavaScript code we use above holds a delay function that will be triggered one second after the page is fully loaded.

The idea is to fire the script only after all the Elementor files are rendered on the page.

While it will work flawlessly for most designs, it will take longer than a second to load for heavy-content websites. Therefore, the code will be firing before Elementor is finished loading.

In such cases, the Elementor default files will overwrite our custom code and keep the accordion open.

To fix that, change the set time of the delay function to a more significant number. For example, switch 100 to 1000, and test it again.

Keep increasing the delay property number until you find the proper delay value for your website. 

Remember not to get discouraged by a high number because it will take the visitors more than a couple of seconds to scroll to the accordion section, which will be close by then. 

Conclusion

Elementor doesn’t have the option to toggle close the accordion widget by default.

However, we could still default close the accordion with a simple script; this tutorial showed you how to do that easily.

Leave a comment and tell us which one of the methods we presented works the best for you.

The post How to Set the Elementor Accordion Widget Closed by Default appeared first on PluginsForWP.

Many online websites only use the contact form to communicate with their customers. Therefore, failure form can badly hurt the business from proper functionality.

Elementor, one of the most accessible page builders plugins to use with WordPress, includes the form widget in its pro version.

If you are building your contact us page with Elementor and discover the form needs to be sent, you have come to the right place.

This article will teach us how to fix Elementor forms from sending or submitting.

Why Fix the Form in Elementor

By providing a contact form, website owners can streamline communication and make it easy for visitors to reach out with questions, comments, or concerns.

Additionally, a contact form can reduce spam and ensure messages are delivered directly to the intended recipient.

Let’s take our contact us page as an example. We are using a few different forms, all intended for a separate department of our customer support team.

We can improve and optimize our response time and user experience by dividing messages into different mailboxes.

In addition, visitors can use the form to provide feedback and ideas on how to serve them better. Listening to customers’ feedback can illuminate some business aspects you may ignore or neglect.

That’s why the contact page is one of the most visited pages on your website.

A contact form is a simple but important feature that can significantly enhance any website’s user experience.

Reasons Why Elementor Form Not Sending

The main reason Elementor forms can’t be sent or submitted is related to the configuration of WordPress mail settings. However, before getting technical, let’s check off some more apparent possibilities.

Add the Email Option to the Actions After Submit Tab

Sometimes, the email will be sent successfully because you will see the submitted form in the submission tab, but you won’t get it in your inbox.

In this scenario, the email properties are set well, but you must prompt Elementor to notify you.

Please add the Email option to the Actions After Submit tab when editing your contact form. It should be there by default but may be unchecked accidentally.

Once you added the option, test the form by resending it.

The Email Recipient is Missing

If the email option is on the list of the Actions After Submit, but you still can’t send or receive the forms from your website, please verify that the Email tab settings are configured correctly.

Expand the Email tab and check if the value in the To field is pointing to the correct address.

If it’s not, correct it, save the changes, and try resubmitting the form. Otherwise, please change it to a different address and test it again.

If both steps above are adequately defined, but the issue still accrues, move on to the next section and change the SMTP settings.

How to Fix Elementor Form to Send Submissions

SMTP, the Simple Mail Transfer Protocol, is a protocol between the WordPress email client software and your website’s hosting company.

If the SMTP is defined correctly, communication between the two servers will ensure the form can submit successfully. On the other hand, miscommunication will prevent the condition from being submitted.

To fix Elementor from not sending forms, we will need to install an SMTP plugin and enter the correct email service credentials of the hosting company.

Once you saved the changes, revisit the page with the Elementor form and submit and test it again.

Popular Email Service Providers SMTP Settings for Elementor

The table below lists the SMTP settings of the most popular email providers to speed up your troubleshooting process and enable you to send and submit Elementor forms quickly.

You can use the details above in the Other SMTP or its unique dedicated box in the Easy WP SMTP plugin’s screen.

Related Articles

• How to fix Elementor editor not loading
• Fix the edit with Elementor button not showing
• Troubleshoot and fix the ‘this site is experiencing technical difficulties’ WordPress error

Conclusion

Contact forms are one of every website’s best tools for communicating with its customers.

Your visitors being unable to send or submit forms in Elementor can negatively affect your business and cause many issues. Therefore, this problem should be addressed immediately, and fix Elementor forms from not being sent successfully.

Leave us a comment and tell us which SMTP plugin you use to solve this problem or need further help.

The post Fix Elementor Form Not Sending or Submitting Successfully Because of a Server Error appeared first on PluginsForWP.

Monetizing your website is a popular way to have a side income. Some of the most popular ways to earn from your online business are by integrating ads and selling products, courses, or support.

Not offering any of the options above doesn’t mean you can’t make money or be appreciated by your visitors.

Moreover, in the last few years, there has been a new great way to be granted for the hard work you put in: letting your customers get you a coffee as a reward for your effort and content.

Adding the ‘buy me a coffee’ donation button is a friendly, non-aggressive way to ask your followers to help with your ongoing costs.

This tutorial will integrate the Buy Me a Coffee and Ko-Fi services with our WordPress website. So let’s start first with Buy Me a Coffee.

Add the Buy Me a Coffee Button to WordPress

The first step of the process is creating an account with the Buy Me a Coffee website.

If you already have an account, skip the following few paragraphs.

However, if you need to create one, navigate to the Buy Me a Coffee website, enter your desired account name, and click the Start my page button.

Next, please enter your email and password, click continue with email, and fill in the code they sent to your inbox.

Then, you’ll need to choose between two ways to receive your money. The default way will require your account to have a minimum withdrawal, while the second way requires a stripe account.

Once done, you’ll be redirected to your account dashboard to view your donation link and the total earned.

After setting up the account, we can add the buy me a coffee button to WordPress, with or without a plugin.

Method #1: Generate the Button Online

In this first way, we will generate the button from the Buy Me a Coffee website and add the code manually.

First, navigate to Settings -> Buttons & Graphics, and select your button’s option.

Change the donation button’s colors and font to match your website design, and click on Generate button.

Then, copy the image code button to the clipboard. We will need to use it shortly.

In your WordPress dashboard, navigate to the desired page or post where you want to add the donation link and an HTML block.

Then, paste the image code we copied in the last step, and save the changes.

Once saved, revisit the page and ensure that the Buy Me a Coffee button was added successfully.

You can then use the generate widget option in the same way and add it to the desired location.

If you want to add the button or widget to all pages on your website, you’ll need to manually insert the script code into the footer file of your child theme or use the dedicated plugin.

Method #2: Use the Buy Me a Coffee WordPress Plugin

A plugin is a more straightforward way to add the buy me a coffee button to your website.

First, navigate to Plugins -> Add New, and install the Buy Me a Coffee plugin.

Once activated, add your username inside the plugin’s screen and save the changes.

Now you can customize both the widget and the button inside the dashboard, similar to how we did on the Buy Me a Coffee website.

When ready to add the button to all pages, navigate to the widgets screen and add the dedicated plugin’s block to the desired location.

By default, the price per coffee is $5. However, you can change the price of a coffee to an amount of your choice by navigating to Donations -> Settings and choosing a different price.

As mentioned above, the Buy Me a Coffee service is only one of the two options. Ko-Fi is a great alternative; we will learn how to integrate it with WordPress in the following section.

Add Ko-Fi Button to WordPress Websites

Ko-Fi is another excellent option for accepting donations and support from website visitors.

Moreover, some of the advantages of Ko-Fi over its alternatives are the ability to sell memberships, products (physical or digital), and custom goods (like drawing or painting).

Like any other SAAS, you’ll first need to choose your desired username and signup with your email and password.

Once inside your dashboard, navigate to Settings -> Payment, and connect the gateway you want to get paid with.

Then, scroll down the current screen and customize your donation button. Some of the things you can change are the button’s mode, text, unit price, and the Thank You message.

Similar to the Buy Me a Coffee website, this service will also enable you to integrate a couple of options button types on your website:

1. Ko-fi button
2. Ko-fi donation widget

To manually generate and implant the codes on your WordPress website, navigate to the Buttons & Widgets tab and select between buttons or widgets.

Please modify the widget or the button appearance to match your website by changing its color and text and clicking Copy.

Add a new Gutenberg HTML block and paste the code to insert the button into your website’s pages or posts.

After saving the changes, revisit the page to ensure the button or widget was added successfully.

The Ko-Fi WordPress Plugin

Ko-fi haș a WordPress plugin we can use to display the donation box or floating button on every page on our website.

Although we can insert the code in the footer file of our child theme to achieve the same results, using the dedicated plugin will simplify the process and ensure it works even if changing the theme.

Inside the WordPress plugins screen, search and install the Ko-fi Button plugin.

Once activated, navigate to Settings -> Ko-fi Settings window, and enter your username ID.

You can also customize the appearance by changing the text and the color of the widget or the button.

To activate the floating donation button, change the Default Display to Show on all pages and save the changes.

Please visit any of your pages to ensure the button appears at the bottom left corner.

Placing the Ko-fi widget in your sidebar is also a wise move. It can improve conversions and encourage fans to donate by being more visible.

To add the Ko-fi box to the sidebar, open the Widgets screen, and add the Ko-fi widget to the desired location.

Save the changes and revisit your website to run tests to verify it’s working as expected.

Conclusion

This article showed you how to add a Buy Me a Coffee button or widget to WordPress in two different ways.

As business owners, we always seek additional opportunities to monetize our website. Donations are an excellent way for our readers to show appreciation to us.

The Buy Me a Coffee and the Ko-fi services are excellent and classy options to achieve that without being too pushy.

Please leave us a comment and tell us which one of the services you chose to achieve this task.

The post How to Add Buy Me a Coffee Donation Button to WordPress 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.