How to Create a WooCommerce Popup to Increase Sales (6 Proven Methods)

Do you want to create a WooCommerce popup to boost sales?

Lightbox popups allow you to easily grab customer attention and nudge them into making a purchase. You can use WooCommerce popups to offer coupons, promote sales, get visitors onto your email list, and more.

In this article, we’ll show you how to easily create a WooCommerce popup to increase sales. We will show you different types of popups and how to apply them to your store.

Why You Need to Create a WooCommerce Popup

Have you ever wondered why you keep seeing popups on all major eCommerce websites?

It’s because popups do a great job of converting website visitors into paying customers. They help online stores to quickly grab customer attention by showing them targeted messages at just the right time.

If you run a WooCommerce store, you can use popups to help you:

1. Increase sales by delivering timely messages to your customers. For instance, you could make the popup appear when users are about to leave your store.
2. Recover abandoned cart sales by offering a coupon or free shipping.
3. Sell more products through cross-sells (promoting related products) and upsells (promoting a better featured product).
4. Build your email list, social following, or remind your customers of ongoing sales and promotions.

That being said, let’s take a look at how to use WooCommerce popups to boost sales and conversions on your store.

We’ll be using OptinMonster for this tutorial. OptinMonster is a powerful conversion optimization tool that lets you turn abandoning website visitors’ into subscribers and customers.

It seamlessly integrates with WooCommerce and have powerful personalization options built specifically for WooCommerce stores.

Tip: To create coupons for your offers, we recommend using Advanced Coupons. It allows you to create lots of different smart coupons for your WooCommerce site.

Getting Started with OptinMonster

Before you begin creating a WooCommerce popup, you need an OptinMonster account that’s connected to your WordPress site.

First, go to the OptinMonster website and sign up for an account.

Tip: OptinMonster’s Pro plan lets you use most of the features we’ll be covering. If you want to create a ‘spin to win’ campaign, you need the Growth plan.

Once you’ve signed up for OptinMonster, you need to connect your OptinMonster account to your WordPress site. To do this, you first need to install and activate the OptinMonster plugin on your WordPress site. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you should see the OptinMonster welcome screen in your WordPress admin. Simply click the ‘Connect Your Account’ button.

Now, follow the on-screen instructions to connect your OptinMonster account with your WordPress site.

Once you’ve done this, you will see the Campaigns page. Here, you need to click on the ‘Create New Campaign’ button:

In the rest of this tutorial, we’ll cover several different types of WooCommerce popups. You can use these quick links to jump straight to the instructions for each one.

• How to Create a WooCommerce Coupon Popup
• How to Create a WooCommerce Cart Abandonment Popup
• How to Create a WooCommerce Cross-Sell Popup to Promote Related Products
• How to Create a WooCommerce Upsell Popup to Get Customers to Spend More
• How to Create a Gamified WooCommerce ‘Spin to Win’ Popup
• How to Create a Fullscreen Popup for WooCommerce

How to Create a WooCommerce Coupon Popup

Coupons are a great way to increase sales. You can use a popup to ensure that customers know about your coupon and encourage them to use it.

To create a coupon popup, simply select the ‘Popup’ campaign type. Then, select your template by bringing your mouse over it and clicking the ‘Use Template’ button. We’re going to use the ‘Coupon’ template:

OptinMonster will prompt you to name your campaign and choose which site you want it to load on.

Now, it’s time to design your coupon. Simply click on any part of the coupon to edit it. You can change the text, font, colors, and more. Here, we’re editing the header text for the coupon:

You can also remove parts of the coupon. For instance, you might decide that you don’t want to have an email sign up box. You could simply display a coupon code within the popup to encourage the customer to use it instantly.

Tip: The default coupon code is SAVE25. This is displayed on the screen after the customer enters their email address. It’s easy to change or remove this under the ‘Success’ view for your popup.

Don’t forget to click the ‘Save’ button once you’re finished with making changes to the coupon design:

For more help, take a look at our step by step instructions on creating a coupon popup. That tutorial also explains how to integrate OptinMonster with your email list.

Once you’ve created your coupon popup, you need to set the display rules. Click the ‘Display Rules’ tab in the top bar. By default, the coupon will appear after 5 seconds have expired, on all pages of your site.

You might want to change this to a longer or shorter duration, or base it on how long the visitor has been on your site as a whole. You might also want to only show the coupon on certain pages of your site.

We’re going to get our coupon popup to appear after our potential customer has been on our site for at least 15 seconds. This means they’ll see the coupon even if they move between several different product pages rapidly:

The final step is to publish your coupon popup and make it live on your site. Follow our instructions at the end of the article for help with this.

How to Create a WooCommerce Cart Abandonment Popup

You may be losing a huge amount of money to cart abandonment.

A popup is a great way to prompt visitors to finish checking out. You can create a special WooCommerce popup to appear when a user is on the shopping cart page and moves to leave your site.

First, create a new campaign in OptinMonster. You need to select ‘Popup’ for the campaign type. Then, go ahead and choose a template for your popup. We’re going to use the ‘Abandoning Checkout’ template:

Now, give your popup campaign a name and click the ‘Start Building’ button:

Your chosen template will open up in the campaign builder. You can change the text, colors, fonts, and more. Simply click on the element you want to change:

Once you’ve finished making changes, don’t forget to click the Save button on the top right.

Now, it’s time to set your popup so that it displays on your WooCommmerce shopping cart page. First, click the ‘Display Rules’ tab at the top of the screen.

Click the ‘time on page’ dropdown here if it’s not already selected, then click on ‘Exit Intent’. OptinMonster’s exit intent technology allows you to show your message at the precise moment user shows the intent to leave your website.

Next, scroll down the page. Leave the first dropdown here as ‘current URL path’ and set the second dropdown to ‘exactly matches’. In the box that appears, enter the URL of your shopping cart page.

Don’t forget to save your changes. Then, go to the Publish tab to put your coupon live on your online store. You can find instructions on this later in our tutorial.

How to Create a WooCommerce Cross-Sell Popup to Promote Related Products

Another great way to boost sales is to cross-sell your products. Cross-selling is when you promote a product that goes with something the customer is already buying.

For instance, if your customer buys a summer shirt, then they might also be interested in buying a sun hat. Or if they buy greetings cards, then they may also want wrapping paper.

To create a cross-sell popup in OptinMonster, you first need to create a new campaign. Make sure you select ‘Popup’ for the campaign type, then choose any template you want.

We’re going to use the ‘Shopping’ template for our popup.

Next, OptinMonster will prompt you to name the campaign and choose which website you want to load it on. Once you’ve done this, simply click the ‘Start Building’ button.

You will be taken into the campaign editor. Here, you can change any aspect of your template by clicking on it. We’ve uploaded a different image for our campaign:

It’s easy to change the text, buttons, and more. You can even include the coupon straight away like we have, by deleting the email newsletter signup field. We added extra text blocks to our popup to give the coupon code:

If you keep the email sign up, make sure you edit the ‘Success’ view of the popup to display your chosen coupon code.

Tip: If you do use the email sign up, you also need to link OptinMonster to your email provider under the ‘Integrations’ tab. There are instructions on this in our step by step guide on creating a coupon popup.

Once you’ve finished creating your campaign, don’t forget to click the ‘Save’ button on the top right.

In order to show your campaign to customers with specific products in their carts, you need to connect OptinMonster with WooCommerce.

To do this, click on the OptinMonster tab in your WordPress dashboard and then click on the ‘WooCommerce’ tab.

You should see a message letting you know that WooCommerce is connected with OptinMonster:

Now, go back to the OptinMonster app and edit your chosen campaign. Click on the ‘Display Rules’ tab, then select ‘the WooCommerce cart contains’ and your chosen product for your rule:

You need to set up a separate rule for each product that you want the cross-sell to apply to. Simply click to add a new ‘OR’ Rule:

Then, add your rule as before:

Don’t forget to click the ‘Save’ button on the top right of the screen. Now, you just need to follow the instructions at the end of this tutorial to put your popup live on your site.

How to Create a WooCommerce Upsell Popup to Get Customers to Spend More

An upsell popup lets you encourage customers to buy a product that’s more expensive than the one they were considering.

For instance, if you sell a software package, you might offer a special deal on a higher-priced plan.

To create your upsell popup, you first need to create a new OptinMonster campaign. Select ‘Popup’ for the campaign type and choose any template that you want to use. We’ll be using the ‘Flash’ template:

Once you’ve selected your template, OptinMonster will prompt you to name your campaign and select the site you want to run it on. Once you’ve done this, simply click the Start Building button:

You can now change anything you like about the campaign by clicking on the item. We’re going to switch the timer to become a dynamic (evergreen) timer. This means it will be set individually for each customer:

If you want to give customers the coupon straight away, simply remove the email field. It’s easy to use the ‘Add Blocks’ feature to add a text field with a coupon code here instead.

Once you’re happy with your coupon, click the ‘Save’ button on the top right. Then, click the ‘Display Rules’ tab.

Simply follow the instructions above for cross-sell coupons to connect OptinMonster and WooCommerce. Then, set a display rule to show the popup when the user is looking at a specific product:

Tip: Don’t want to go through the steps of connecting OptinMonster and WooCommerce? You could instead use OptinMonster’s page targeting rule to target the URL of your product page instead.

Once you’ve set your display rules, go ahead and save your popup. Then, simply put it live on your site by following the instructions at the end of this tutorial.

How to Create a Gamified WooCommerce ‘Spin to Win’ Popup

The spin a wheel popup we’re going to look at is a bit different. The gamified ‘spin to win’ popup gives the customer a special offer or coupon. It’s a fun alternative to boost conversions and overall engagement.

First, create a new campaign in OptinMonster and select the Gamified campaign type. There are 3 templates you can choose from. We’ll be using the blue wheel:

OptinMonster will prompt you to give your campaign a name and choose which website to load it on. Once you’ve done this, just click the ‘Start Building’ button.

You will now see the coupon wheel template in the OptinMonster editor. Simply click on any element that you want to change. To edit the different options on the wheel, click on it then click the ‘Edit Wheel Sections’ button:

Once you’re happy with your coupon wheel, click the ‘Save’ button at the top of the screen:

Just follow our step by step guide to creating a ‘spin to win’ popup if you want more help with setting up your coupon wheel.

You also need to link OptinMonster to your email system. To do that, simply click on the ‘Integrations’ tab then click the ‘Add New Integration’ button:

Next, you need to select your email provider from a dropdown list:

Follow the on-screen instructions to connect OptinMonster with your email provider. Don’t forget to click the ‘Save’ button again at the top of the screen after doing so. Now, you can put the popup live on your site by following the instructions at the end of this tutorial.

How to Create a Fullscreen Popup for WooCommerce

Another very effective popup you can create for your online store is a fullscreen WooCommerce popup. This lets you welcome new visitors and encourage them to join your email list. You could offer them a special discount in return.

To create a fullscreen popup in OptinMonster, create a new campaign and choose the Fullscreen campaign type. Then, select a template. We’re going to use the Estate template for our popup:

Next, you need to enter a name for your campaign and choose which site it will display on. Once you’re ready, click the ‘Start Building’ button.

You’ll now see your fullscreen welcome mat in the OptinMonster builder. You can edit the text and the image to suit your store. Simply click on whatever you want to change.

We’re going to change the text by clicking on it and editing it in the left hand pane:

Go ahead and make any other changes you want.

Next, you need to integrate OptinMonster with your email list by clicking the ‘Integrations’ tab. For instructions on this, take a look at our guide to spin the wheel popups above.

Once you’re happy with your welcome mat, don’t forget to click the ‘Save’ button. You can then move to the ‘Display Rules’ tab:

For the display rules, you want to set your welcome mat to only display to first time visitors. To do this, click on the ‘time on page’ dropdown and select the ‘New Visitor’ option:

If you want the welcome mat to display on all pages of your site, simply leave the ‘current URL path’ dropdown set to ‘is any page’. Don’t forget to click the ‘Save’ button at the top of the screen:

You can now go ahead and put your popup live on your site by following the instructions below.

For more tips, check out our guide to creating a welcome mat for your WordPress site. You’ll find some useful examples there, too.

Putting Your WooCommerce Popup Live on Your Site

After creating any popup, you need to make it live before it will show up on your website. First, you need to click the ‘Publish’ tab in the OptinMonster app. Then, click the ‘Status’ toggle to set it to Live.

Note: Your popup will not be live straight away. You still need to go live with it in WordPress.

Now, go back to your WordPress admin and click on the OptinMonster menu item.

You should then see your popup listed here:

You need to click the ‘Go Live’ button to put your campaign live:

It’s always a good idea to check your site to make sure your popup is displaying as intended. Here’s our cross-sell campaign in action, promoting sun hats when there’s a summer shirt in the customer’s cart:

We hope this article helped you learn how to create a WooCommerce popup to increase sales. You might also like our list of the best WooCommerce plugins for your store, and our comparison of the best WooCommerce hosting providers to speed up your store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a WooCommerce Popup to Increase Sales (6 Proven Methods) appeared first on WPBeginner.

August 10, 2020 at 05:42PM

12 Best Calculator Plugins for Your WordPress Site

Are you looking for a calculator plugin for your WordPress website?

There are many types of WordPress plugins to calculate prices, measurements, dates, form fields, and more.

In this article, we have hand-picked some of the best calculator plugins for your WordPress site.

What to Look For in a WordPress Calculator Plugin

There are a lot of different calculator plugins out there that you could use on your WordPress site.

Some calculator plugins can be used to create any calculator of your choice. However, this can be a lot of work. When possible, you want to pick a plugin that has a pre-built calculator template for the type of calculator you want to create.

It’s also important to choose a responsive calculator that looks good on mobiles as well as on computers. You may also want a plugin that lets you change the colors and styles of your calculator so it can match your website’s color scheme and brand.

1. Formidable Forms Calculators

Formidable Forms is a drag and drop form builder that comes with a large range of pre-built calculator templates. These let you easily create different calculators on your WordPress blog or website.

With Formidable Forms calculator templates, you can create and add the following calculators on your site:

• BMI Calculator
• Percentage Calculator Template
• Advanced Mortgage Calculator Template
• Simple Mortgage Calculator Template
• WooCommerce Product Configurator
• Car Payment Calculator Template
• Debt to Income Ratio Calculator Form Template
• Life Insurance Calculator Template
• ROI Calculator Form Template
• Savings and Investment Calculator Form Template
• Order/Billing Form Template
• Age Calculator Form Template
• Compound Interest Calculator Template
• Final Grade Calculator Template
• Pregnancy Due Date Calculator Form Template
• Daily Calorie Intake Calculator Template
• Length Conversion Calculator Form Template
• Paycheck Calculator Form Template
• Tip Calculator Form Template
• Amortization Calculator Template

Some of these are simple, useful tools, like the percentage calculator, the length conversion calculator, the tip calculator, and the age calculator. Others are much more detailed and offer huge value to your users.

For instance, if you’re running a medical or health blog, you might want to offer a BMI (Body Mass Index) calculator or a Daily Calorie Intake calculator. These are really easy to create using Formidable Forms.

If you sell real estate, you could use the simple mortgage calculator or the advanced mortgage calculator on your site. You could even offer tools like the debt to income ratio calculator to help users work out whether the mortgage is affordable for them.

All Formidable Forms’ calculators are responsive so they’ll look great on mobile devices. You can also easily customize them to match your website’s branding.

Formidable Forms is our top calculator pick due to its large range of calculators and ease of use. It’s also one of the best WordPress contact form plugins.

2. Calculated Fields Form

Calculated Fields Form allows you to create forms and perform mathematical calculations among form fields. It comes with a form and logic builder which you can use to add fields, assign values to those fields, and define mathematical operators to run.

Calculated Fields Form comes with 5 built-in sample calculators that you can use or modify:

• Simple Calculator Operations
• Calculation with Dates (bookings with check-in and check-out dates)
• Ideal Weight Calculator
• Pregnancy Calculator
• Lease Calculator

You can easily use Calculated Fields Form with the WordPress content editor (block editor) as well as the old classic editor. It also works with popular page builder plugins.

3. Responsive Mortgage Calculator

Responsive Mortgage Calculator is an easy to use mortgage calculator for real estate websites. It comes with a sidebar widget and shortcode that you can use inside your WordPress posts, pages, and below your listings.

It also comes with light and dark color schemes. However, you can disable plugin styling and use your theme’s colors or add custom CSS to style the calculator.

4. Measurement Price Calculator

Measurement Price Calculator is perfect for running a WooCommerce online store where you sell items of variable sizes. It allows you to add item pricing based on measurements selected by the customer.

It has two different measurement calculation methods so you can choose whichever suits your product best. You can offer unit pricing based on set quantities (such as a box of tiles). Or you can let the user enter dimensions and buy the correct amount for the length, area, or volume they require.

It works well with other top WooCommerce plugins and addons.

5. WooCommerce Product Options and Price Calculation Formulas

WooCommerce Product Options and Price Calculation Formulas provides additional WooCommerce product options and pricing calculation formulas. It comes with a custom product layout builder that allows you to add and display more product options for each item.

It includes conditional logic and formulas to calculate pricing based on selection. You can use it to show, hide, or completely change product pricing based on the customer’s selection. You can also use mathematical formulas to calculate product pricing and other display options.

6. WooCommerce Price Based on Country

The WooCommerce Price Based on Country plugin does exactly what it says. The plugin uses WooCommerce’s geolocation feature to guess the customer’s location. It then displays pricing in the local currency.

It can automatically calculate pricing by the current exchange rate, or you can manually set it for each currency. It also includes a country switcher widget that enables users to change country and currency on their own. This plugin works well with multilingual WordPress sites.

7. WordPress Mortgage Calculator Estatik

WordPress Mortgage Calculator Estatik is a useful real estate plugin to let your users estimate their mortgage payments.

It can be used as a simple calculator, with the purchase price, down payment, and interest rate. Or if you prefer, you can switch on advanced options like home insurance, property taxes, and PMI (private mortgage insurance).

The shortcode lets you add your mortgage calculator to your sidebar or to any post or page. You can display the results in a popup with a graph or with a simple image and text.

8. Mortgage Calculator

Mortgage Calculator is another useful mortgage calculator plugin. It shows a graph for the principal, interest, and remaining balance across the term of the mortgage. It can also handle property tax.

You can easily place the calculator in your website’s sidebar, or on any post or page, using the shortcode. It’s a free plugin, but note that it’s supported by ads.

9. YITH WooCommerce Cost of Goods

YITH WooCcommerce Cost of Goods is a handy plugin that helps you add cost of goods and then calculate profit margins in your WooCommerce reports.

You can include the product cost, cost of shipping, and payment processing costs for each product. The plugin will then calculate and show your profit margin in WooCommerce reports as a separate column.

This allows you to instantly calculate how your business is doing and what you can do to make more sales. For instance, you can offer more discounts for certain products or increase prices for products where you are not making any profit.

10. Loan Repayment Calculator and Application Form

Loan Repayment Calculator and Application Form is a great calculator plugin if you run a financial website or business. You can style it to match your site.

You can use it for fixed-fee payments, regular payments, savings, comparisons, and more. The calculator can handle different types of interest: fixed, simple, compound, and amortized.

The pro version also has features like sliders and the option for the user to select their own currency.

11. CC BMI Calculator

The CC BMI Calculator is a simple body mass index (BMI) calculator that can be used on health and fitness websites. It allows users to enter their height and weight information to see their body mass index score. This indicates whether their weight falls into a healthy range or not.

The plugin allows you to choose different styles by changing colors. However, using this feature requires you to add a link to the plugin author’s website. It is available in both imperial and metric systems, so you can choose which unit will be used as the default option.

12. Stylish Cost Calculator

Stylish Cost Calculator is a great way to provide customized, instant quotes for potential customers and clients. You can use one of the 7 built-in templates to get started quickly.

The calculator can automatically convert between currencies, detecting the user’s location to show the right one. You can customize the cost calculator however you like, adding or removing options, changing colors, and more.

You can also set a bulk discount, create branded invoices, and more. If you have the Pro version, you can create coupons. You can also integrate the Pro version with PayPal so you can take payments.

We hope this article helped you discover the best calculator plugins for WordPress. You may also want to see our list of must have WordPress plugins for business websites, and our comparison of the best email marketing services to grow your sales.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 12 Best Calculator Plugins for Your WordPress Site appeared first on WPBeginner.

August 07, 2020 at 05:19PM

How to Add a Background Image in WordPress

Do you want to add a background image to your WordPress site?

Background images can be used to make your website look more engaging and aesthetically pleasant.

In this article, we will show you how to easily add a background image to your WordPress site.

Video Tutorial

If you’d prefer written instructions, then please continue reading.

Method 1. Add a Background Image Using Your WordPress Theme Settings

Most popular WordPress themes come with custom background support. This feature allows you to easily set a background image to your WordPress site.

If your theme supports the custom background feature, then we recommend using this method to add a background image to your WordPress site.

However, if your theme doesn’t support this feature, or you don’t like how it implements background images, then you can try the other options mentioned in our tutorial.

First you need to visit the Appearance » Customize page in your WordPress admin. This will launch the WordPress theme customizer where you can change different theme settings while viewing a live preview of your website.

Next, you need to click on the ‘Background image’ option. The panel will slide in and show you the options to upload or select a background image for your website.

Click on the select image button to continue.

This will bring up the WordPress media uploader pop-up where you can upload an image from your computer. You can also select a previously uploaded image from the media library.

Next, you need to click on the choose image button after uploading or selecting the image you want to use as background.

This will close the media uploader pop-up, and you will see your selected image’s preview in the theme customizer.

Below the image, you will also be able to see the background image options. Under ‘Preset,’ you can select how you want the background image to be displayed: fill screen, fit screen, repeat, or custom.

You can also select the background image position by clicking on the arrows below. Clicking on center will align the image to the center of the screen.

Don’t forget to click on the ‘Save & Publish’ button at the top to store your settings. That’s all, you have successfully added a background image to your WordPress site.

Go ahead and visit your website to see it in action.

Method 2. Add a Custom Background Image in WordPress Using a Plugin

This method is a lot more flexible. It works with any WordPress theme and allows you to set multiple background images.

You can also set different backgrounds for any post, page, category, or any other section of your WordPress site.

It automatically makes all your background images full-screen and mobile-responsive. This means your background image will automatically resize itself on smaller devices.

First, you need to install and activate the Full Screen Background Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Full Screen BG Image to configure the plugin settings.

You will be asked to add your license key. You can get this information from the email you received after buying the plugin or from your account on the plugin’s website.

Next, you need to click on the ‘Save Settings’ button to store your changes. You are now ready to start adding background images to your WordPress site.

Go ahead and click on the ‘Add New Image’ button on the plugin’s settings page. This will take you to the background image upload screen.

Click on the ‘Choose Image’ button to upload or select an image. As soon as you select the image, you will be able to see a live preview of the image on your screen.

Next, you need to provide a name for this image. This name will be used internally, so you can use anything here.

Finally, you need to select where you want this image to be used as the background page.

Full Screen Background Pro allows you to set images as a global background, or you can choose from different sections of your website like categories, archives, front or blog page.

Don’t forget to click on the save image button to save your background image.

You can add as many images as you want by visiting the Appearance » Full Screen BG Image page.

If you set more than one image to be used globally, then the plugin will automatically start displaying background images as a slideshow.

You can adjust the time it takes for an image to fade out and the time after which a new background image starts to fade in.

The time you enter here is in milliseconds. If you want a background image to fade out after 20 seconds, then you will need to enter 20000.

Don’t forget to click on the save settings button to store your changes.

Background Images for Posts, Pages, and Categories

Full Screen Background Pro also allows you to set background images for single posts, pages, categories, tags, and more.

Just edit the post/page where you want to display a different background image. On the post edit screen, you will notice the new ‘Full Screen Background Image’ box below the post editor.

To use a background image for a specific category, you need to visit the Appearance » Full Screen BG Image page and then click on the ‘Add New Image’ button.

After uploading your image, you can select ‘Category’ as the context where you want to display the background image.

Now enter the specific category ID or slug where you want to display the image. See our guide on how to find category ID in WordPress.

Don’t forget to save your image to store your settings.

Method 3. Add Background Images using CSS Hero

CSS Hero is a WordPress plugin that allows you to make any changes to your theme without touching a single line of code.

You can add background images quickly in a few simple steps. First, you need to install and activate CSS Hero. Once you’ve done that, it’s time to start customizing your website.

Now open up your homepage in your browser. You’ll see the ‘Customize with CS SHero’ link in your admin bar.

After you click that link, you’ll see the CSS Hero options open up. Hover your mouse over the area you want to add an image to.

In the screenshot below, you’ll see .header-filter-gradient area. When you click this area, you can then choose the background link in the left sidebar.

The background link will open. From there, you can click on ‘Image.’ Now, you can choose an image from Unsplash or from your uploads to create your background.

When you click on the image you want, you’ll see the ‘Apply Image’ button. Then you can choose what size you want your image to be. We chose the large version so it would stretch across the page.

Hit ‘Save and Publish’ at the bottom, and the background image is now saved for your site.

Method 4. Add Custom Background Images Anywhere in WordPress Using CSS Code

By default, WordPress adds several CSS classes to different HTML elements throughout your WordPress site. You can easily add custom background images to individual posts, categories, author, and other pages using these WordPress generated CSS classes.

For example, If you have a category on your website called TV, then WordPress will automatically add these CSS classes to the body tag when someone views the TV category page.

<body class="archive category category-tv category-4"> 

You can use the inspect tool to see exactly which CSS classes are added by WordPress to the body tag.

You can use either category-tv or category-4 CSS class to style just this category page differently.

Let’s add a custom background image to a category archive page. You will need to add this custom CSS to your theme.

body.category-tv { 
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Don’t forget to replace background image URL and the category class with your own category.

You can also add custom backgrounds to individual posts and pages. WordPress adds a CSS class with the post or page ID in the body tag. You can use the same CSS code just replace .category-tv with the post specific CSS class.

We hope this article helped you learn how to add a background image in WordPress. You may also want to see our comparison of the best drag & drop page builder plugins for WordPress, and our tutorial on how to create a custom WordPress theme (without any code).

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Background Image in WordPress appeared first on WPBeginner.

August 06, 2020 at 04:30PM

How to Add Automatically Drip Content in Your WordPress Site

Do you want to automatically drip content in your WordPress members area?

If you are running a WordPress membership website or selling premium content, then you may want to set up drip content instead of showing all course content right away.

In this article, we will show you how easily to add automatic drip content in your WordPress site.

What is Drip Content?

Drip content allows you to gradually release content instead of giving it all away at once.

It enables membership websites to automatically release content at regular intervals to their users. Instead of continuously creating new content, site-owners can efficiently use their existing content.

It is also useful when selling online courses. Instead of giving away your complete online course at once, you can spread your course across a pre-defined training period, so your students or members aren’t overwhelmed.

Why Add Drop Content in WordPress?

Normally, you can simply make a membership website and give away premium content to your paid subscribers.

However, if you are offering monthly subscriptions, then you would want to hold on to your existing customers.

Offering drip content at a regular pace allows you to keep users engaged for a long time. You can reuse your existing content and deliver it sequentially.

Drip feed also allows you to make your content more effective. For example, if you are offering an online classes, then this gives users a chance to submit assignments or quizzes before moving on to the next lesson.

Perhaps the best advantage is that you get the time needed to create new content, promote your business, and increase traffic and sales.

What Do You Need to Offer Drip Content in WordPress

The first thing you need is a WordPress membership plugin that allows you to easily schedule drip content on your website.

This is where MemberPress comes in.

It is the best WordPress membership plugin on the market. It allows you to create paid subscriptions on your website and easily set up automatic drip content in WordPress.

You’ll also need content that you want to deliver to your audiences. You can restrict access to any type of content using the powerful rules feature.

Let’s get started.

Adding Drip Content in WordPress

First, you need to install and activate the MemberPress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit MemberPress » Settings page to enter your license key. You can find this information under your account on the MemberPress website.

Next, you need to add a payment method to accept payments on your membership website. Simply switch to the Payments tab on the plugin’s Settings page and then click on the ‘+’ icon to add a payment method.

MemberPress supports PayPal and Stripe payments under their basic plan. It also supports Authorize.net, but you’ll need their Plus plan for that.

Simply select your preferred payment gateway from the drop-down menu and enter the required details. You can also add multiple payment methods by clicking on the + icon again and adding another payment method.

Now that you have done the basic set up. It is time to add a membership plan.

Simply go to MemberPress » Memberships page and click on the Add New button at the top.

On the next screen, you need to provide a title for your membership plan and then enter the price. MemberPress allows you to choose different types of pricing including lifetime, expiring, and recurring.

You can provide a description of the plan in the text editor. Below that, you can configure different settings for your membership plan under the membership options box.

Once you are finished setting up your membership plan, don’t forget to click on the Publish button to save your changes.

Repeat the process to create more membership plans if needed.

Scheduling Automatically Drip Content Rules

MemberPress comes with a powerful set of rules. These allow you to restrict access to your content based on a user’s subscription and membership.

These rules also allow you to drip content and schedule any content to be released at your own pace.

Simply head over to the MemberPress » Rules page and click on the Add New button at the top.

On the next screen, you need to choose the rules criteria.

MemberPress offers a whole range of options. You can select posts that match certain tags, categories, pages that are under the same parent page, single posts, or any URL.

For instance, we chose all posts tagged ‘firstweek’. These are the articles that we want to release to the users during their first week of the subscription.

Next, you need to select the membership plan or members that this rule would apply to.

Now that you have selected the content and membership plan, it’s time to set when to drip content.

Scroll down a little and check the box next to ‘Enable Drip’ checkbox. This will reveal the drip rules options.

You can select after how many days the content becomes available to the user. After that, you can match it with criteria like when user buys a specific subscription, registers for an account, buy any product, and so on.

Optionally, you can also enable the drip expiration rule. This allows you to make content available for a limited time after which content will expire and users will not be able to access it.

Below that you can customize how to handle unauthorized access. You can choose to show users a custom excerpt, message, and login form.

Once you are done, don’t forget to click on the Save Rule button to apply these settings.

You can add new rules by visiting MemberPress » Rules page again and repeat the process.

For instance, you may want to set up a rule for the content you want to show to the users during their second week of subscription.

How Drip Content Looks to The Users on Your Site

MemberPress will show the default unauthorized access message to all users, if you don’t set a custom message for each rule.

This is why we recommend setting your own custom message for unauthorized access when setting up your drip content rules.

This is how it looked on our demo site which showed an article excerpt, custom message, and login form.

Note: You can selectively hide these content from being visible entirely using MemberPress filters, so users won’t see this content until it becomes available.

Tips on Managing Drip Content in WordPress

Drip content is a powerful tool to grow your membership website and online community. However, it could easily get messy and may create bad user experience.

The following are a few tips that will help you use drip content more effectively on your site.

1. Plan a Smooth Content Strategy

Plan the content you’ll be releasing way ahead. You don’t want to give away all the content, but it should be enough to satisfy your customers.

You can prepare your content and set it up before launching your campaign. However, make sure your site is under maintenance mode so that your paid content does not get cached by search engines.

2. Create an Email List

Integrate your drip content strategy with your email marketing. This allows you to set up a drip-email campaign that automatically sends users email notifications when new content is available.

We recommend using Constant Contact. It is the best email marketing service for small businesses and comes with easy automation tools that help you set up automated campaigns for new subscribers.

For more powerful marketing automation tools, you can look at Drip or ConvertKit (although they’re more expensive than Constant Contact).

3. Promote Products with On-Site Retargeting

Many membership websites rely on members upgrading their membership plans, buying other products, or renewing their subscriptions.

This is where you’ll need OptinMonster. It is the best conversion optimization tool and helps you convert existing users with on-site retargeting.

You can show users targetted messages with lightbox popups, countdown timers, slide-in boxes, and more.

4. Learn from User Behavior

As your memberships grow, you would want to know what’s encouraging users to sign up for your membership plan and what’s stopping them.

You can easily track that with MonsterInsights. It is the best Google Analytics plugin for WordPress and helps you see where your users are coming from and how they use your site.

With this data, you can make informed decisions and adjust your marketing strategy to grow your business. See our guide on conversion tracking in WordPress for detailed instructions.

We hope this article helped you learn how to add automatically drip content in WordPress. You may also want to see our ultimate WordPress security guide to keep your membership site secure, and our comparison of the best WordPress page builders to customize your site design.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Automatically Drip Content in Your WordPress Site appeared first on WPBeginner.

August 05, 2020 at 04:49PM