The WooCommerce store background image is one of the design elements that can help your store differ drastically from other websites.
Yet most businesses don’t spend a lot of time thinking about the background image when designing a WooCommerce website. We’ve all visited websites on which the background image distracts you from the main content or you are unable to read the text. This can be quite frustrating for visitors and cause them to bounce off your website. In addition to negatively affecting customer experience, it can also damage your brand perception.
A rushed WooCommerce background can make navigation confusing on your ecommerce store. Additionally, customers will have a hard time reading information. This ruins your customers’ shopping experience and can lead to them bouncing off your WooCommerce store.
In this tutorial, we’ll take a look at the default background options available in the Storefront theme that can help you customise the WooCommerce background image. We’ll also explain how Pootlepress can help customise the WooCommerce background to a deeper level – without using any additional CSS code.
How to customise the background in WordPress
WordPress recommends that you use a 1920 x 1080 px sized image as the background image for your WordPress website. It is the most suitable size for a WordPress background image with a perfect ratio of 16:9.
Keeping the file size small is also important as it guarantees that your website will load faster and work seamlessly regardless of the user’s device. That said, the pixels per inch (PPI) or dots per inch (DPI) should be at least 72 to maintain quality.
Customising the background in WooCommerce Storefront theme with WordPress
You can access the background customisation area to manage the various background elements of your WooCommerce store. To do this, navigate to Appearance → Customise → Background from the WordPress admin panel.
How to change the WooCommerce background image
You can change the WooCommerce background of your online store from this screen. Click on the Select Image button to upload or select a background image from the media gallery.
Once you’ve chosen the image you’re going to use, click on the Edit Image button to crop and edit the image.
You can crop and edit the background image based on your preferences. Once you’re done, click the Save button. This will crop and edit the photo. Now you can select and set that image as your online store’s background. Select the image and click on the Choose image to set the image as the WooCommerce background.
The changes will reflect on your online store’s front-end.
Additional settings for the WordPress background
Preset field
The Preset field allows you to change the formatting of the image using preset designs and alignments. You can click on the dropdown menu below Preset and choose Default, Fill Screen, Fit To Screen, Repeat, or Custom. You can select and test each of the other presets to see which one looks best.
Image Position tool
Click on the arrows to move your background image around. This way, you can adjust the orientation to either place the image’s focus to see which looks the best.
Image Size field
This option allows you to change the background image’s size. Click on the drop-down menu below Image Size and select from either Original, Fit to Screen, or Fill Screen.
Repeat background image checkbox
By ticking this checkbox, the background image will repeat once you start scrolling on the webpage. This means that it will repeat itself to display on the whole page, even if the user keeps scrolling to the bottom of the webpage.
Scroll with Page
You can select this checkbox to set the background image to scroll with the page. This sticks the background image to the foreground content and scrolls along with the user as the person moves up or down on the webpage.
Background colour
You can also choose to set a background colour along with your WooCommerce background image. By clicking on the Select colour button, you can select a background colour from a colour palette.
Background image behind the WordPress header
You can also set the background image behind the WordPress header on your online store. This is great for highlighting big sales (such as holiday sales) or limited-time discounts on your WooCommerce store. A new header background adds a new vibe to your website that can help your online store stand out from the competition.
How to change the WooCommerce header background image
Navigate to Appearance → Header from the WordPress dashboard. Next, click on the Add new image button to select your WooCommerce header background image.
Once you select your image, click on the Select and crop button to crop the image before adding it to the header of your website. The built-in crop tool automatically provides the right dimensions for the header background image. You can just move the cropping box to the location that makes the most sense for your background image.
Once you’re ready, click on the Crop image button to crop and set your header image background.
You can also choose to change the background colour instead of adding a background image. To do this, click the Select colour button under the Background colour section and pick a colour from the colour palette. This will add a plain background colour to the header of your WooCommerce store.
Limitations when customising WooCommerce background with the Storefront theme
You can change the WooCommerce background and the header background image easily using the WordPress Customiser with the Storefront theme. However, the options available to you are limited.
By default, the WordPress background shows up on every page and post of your website, even if you don’t want it to.This means that you cannot add a background image for individual WooCommerce pages, posts, or headers on your store. In addition to this, it’s not possible to add rich elements like product sliders or videos – you can only add images.
Customising the WooCommerce background with Storefront Pro
If you’re looking for a lot more customisation options than what the default WooCommerce Customiser with the Storefront theme offers, Pootlepress Storefront Pro is worth checking out.
It offers more customisation to control several aspects of your WooCommerce store. In addition to this, it offers advanced customisation for backgrounds, which is exactly what we need.
Changing website background
You can change the WooCommerce background of your site similar to the default Storefront theme options mentioned above. You can change and edit your image before adding it to the WooCommerce background on your site.
Changing header background with Pootlepress
You can also change the header background of your site with Pootlepress. To do this, navigate to Customiser → Headers & Navigation → Header Type to access the different settings.
Here, you can set the header background to either Default, Featured Image, Slider, Video, or Featured Products. You can also set the header height by moving the slider below the Home header height section.
You can set the type of font you want to use in the homepage title of your site by selecting it from the drop-down menu under Header hero title font. It also lets you set the size of the title text by moving the slider under the Header hero title size section.
Additionally, you can set different customisation options that will change the way your WooCommerce background looks and feels on your online store.
Using Home Hero to add sliders, videos, and products
You can use the Pootlepress Storefront Pro theme to add sliders, videos, or featured products to the WooCommerce background of your online store.
Start by navigating to Customiser → Headers & Navigation → Header Type to add a slider to the WooCommerce background. Under the Homepage hero section, select the Slider checkbox. You can set images for the slider by scrolling down to the Slider 1 image section and clicking on the Select image button.
After you’re done adding the image, you can set the title and the button text using the text fields below. Additionally, you can set different font customisation options and change the height of the Home Hero slider.
Once you’re done, here’s what the Home Hero Slider will look like instead of the default, generic WordPress background.
Similarly, you can add videos and featured products too. All you have to do is select the Video option under the Homepage hero section. You can add a YouTube or Vimeo video URL to the text field under Video (full screen) URL.
You can also add featured products to the WooCommerce background using Home Hero. Select the Featured products option under the Homepage hero section. This will link your WooCommerce featured products to the WooCommerce background of your site. Here’s what it’ll look like:
Add a background image or product slider to Shop & Category pages
Using Storefront Pro, you can add a background image or a product slider to the Shop and Category pages of your WooCommerce store. To do this, navigate to Customiser → WooCommerce → Shop.
Here, you can add a featured image or a product slider to the shop pages and the category pages of your site. Select the checkbox next to the Featured products slider option under the Shop Hero Type section. This will add a product slider to the background of your shop page. You can also select the Featured image option to add a featured image as the WooCommerce background image.
Similarly, you can add it to the category pages of your WooCommerce store. Select the checkbox next to the Featured products slider option. You can also adjust the height for both the product sliders using the slider under the Shop and Category Hero height section.
Customise background and header background for individual pages
If you want to customise the background and header background images for individual pages, you can just go to any WooCommerce page or post and click on the Customise button from the top admin bar.
You can set the header image background by going to Header and Navigation → Header Elements and clicking on the Add new image button under the Current header section. It’s also possible to set a header background colour instead of using an image. To do this, click the Select colour button under the Header Background colour section.
Next, let’s add a background image to individual pages. You can do this by navigating to Customising → Content → Background and selecting a suitable background image. Storefront Pro also lets you set different image size options. You can also add a background colour along with using the background image, this makes your webpage look unique and modern.
You can do this for any WooCommerce page, including single product pages.
Additional features
The Storefront Pro plugin, out of the box, comes with lots of features for WooCommerce store owners and store managers.
For starters, you get free add-on modules with your subscription that include Sales, Pop, Wishlists, and Skins. These are ready-made design skins for one-click activation. You also have the option to create your custom skins and use them for special promotions.
Store owners can use wishlists on their WooCommerce store for letting customers save their products to buy them later or for when they are available for purchase again.
The sales pop module shows recent sales while the social proof module helps you sell more. You can also customise product layouts, shop layouts, and individual products. Storefront Pro also offers blazing fast WooCommerce search and lets you enable a distraction-free checkout.
In addition, you can use different header styles with social icons and contact information. Pootlepress Storefront Pro plugin offers page builder support, mobile device support, and much more. All of this can help your WooCommerce store stand out and make it easier for customers to navigate through it easily. You can customise your online store without additional CSS code.
Conclusion
You need to be able to customise the WooCommerce background as it can help your website stand out and be more memorable. This can help you differentiate yourself from the competition and improve the shopping experience for customers on your WooCommerce store.
All of this is possible with Pootlepress’ Storefront Pro plugin. The best part is that you don’t have to use any custom CSS code.
Ready to transform your WooCommerce background with images, videos, and product sliders? Get the Storefront Pro plugin today!
Leave a Reply