One place for hosting & domains

      WooCommerce

      How to Create a WooCommerce Child Theme


      Let’s say you have a WooCommerce store up and running.

      If you’re using the official Storefront theme, it might even look quite professional. However, you may still want to customize the appearance of your WooCommerce store to match your vision.

      The best solution is often to create a WooCommerce child theme. That’s because a child theme enables you to make changes to your original theme without editing it directly. It simplifies the process of customizing your store’s appearance and eliminates potential risks to your theme and store.

      In this article, we’ll look at how you can style your WooCommerce store using themes. Then, we’ll show you how to create your own child theme in just five steps. Let’s get started!

      A Quick Look at WooCommerce Themes

      With the launch of the WooCommerce plugin in 2011, WordPress became the most popular e-commerce platform. WooCommerce is currently used to power 25% of all online stores, making it 6% more popular than its closest competitor.

       

      One of the elements that has made WooCommerce so successful is how easy it is to create a unique store with minimal effort. However, this alone doesn’t explain the platform’s popularity.

      Another huge factor in WooCommerce’s success is the nearly infinite customization possibilities it offers. When combined with the right theme, you have access to a lot of design flexibility.

      WooCommerce is compatible with almost all WordPress themes. However, most of them will not be optimized to handle the unique features of the plugin.

      Fortunately, the Storefront theme is an excellent option. This is the official WooCommerce theme, built specifically to integrate with the plugin. It looks compelling right out of the box, with a simple and clean design that puts the focus on your products:

      the WooCommerce Storefront theme

      This bare-bones design also makes Storefront an ideal base for customization. This is where child themes come in handy, which we’ll look at next.

      Why You Might Want to Create a WooCommerce Child Theme

      If you’ve spent much time reading up on WordPress, you’ve probably come across child themes before.

      In short, a child theme starts life as a copy of another theme, which is known as the ‘parent theme’. You can then make changes to the child theme and test them out without editing the parent theme directly. This is important because altering the original theme can result in irreversible errors and even damage to your website.

      You might create a child theme because you want to use another theme as a basis, rather than having to build a new theme entirely from scratch. Alternatively, you may only want to make some minor changes to a theme’s branding or overall aesthetic. The sky really is the limit, depending on how much time you’re willing to devote to the project.

      When it comes to WooCommerce, most child themes are based on Storefront:

      Storefront child theme options in the official WooCommerce store

      You can download several child theme options from the official WooCommerce store or from other sites like ThemeForest. However, it’s possible that none of the existing child themes offered match your needs, or you may simply want to create a unique look. What’s more, you might not want to spend money on a premium theme if you feel you could do better yourself.

      In a post on the official WooCommerce blog, the plugin’s developers discuss the most common motivation behind using a child theme for your online store:

      “The aim with our own Storefront child themes is to deliver a store experience perfect for your own niche. After installing Galleria, and not touching any settings, you instantly have a store fit to sell high-end fashion items. With ProShop, you can rapidly set up a stylish sports store.”

      The actual process of creating a child theme is the same whether you’re making one specifically for WooCommerce or for a more general WordPress site. However, you will need to keep your store’s purpose in mind as you customize your child theme. An e-commerce site requires a different design philosophy than a blog, after all. Let’s see what this process looks like in practice!

      How to Create a WooCommerce Child Theme (In 5 Steps)

      Now, we’re going to walk you through how to create a WooCommerce child theme. In this example, we’ll create a basic theme that uses Storefront as its parent, although you can use any theme as a base.

      We’ll show you how the process works when starting from scratch. However, if you want to skip some of these steps and get straight to customizing your site, you can also download and install a sample Storefront child theme.

      Finally, we highly recommend creating a backup of your site before you proceed any further. This will keep your store safe if something breaks during the development process.

      It’s also smart to use a staging environment for creating and tweaking your child theme. Once you’ve taken these security precautions, you can proceed to the first step!

      Step 1: Make a Folder for Your WooCommerce Child Theme

      The first thing you’ll need to do is to create the folder that will contain your theme. If you’re adding the child theme directly to an existing site, the best way to do this is via SFTP. You can do this using a free application like FileZilla.

      Once you have the program up and running, log in to your site with your hosting credentials. Then, you’ll need to navigate to the wp-content/themes/ folder. This is where your site’s themes are installed.

      All you need to do is create a new folder within this one:

      the WordPress themes folder in FTP client

      When creating a child theme, it’s best to give it a name that reflects the parent. For example, we’re making a child theme for Storefront, so we’ll name our folder “storefront-child.”

      The first thing you’ll need to create and place in this folder is a simple text file called functions.php. This is an important core file that helps to dictate how your site looks and acts. However, most child themes can use the functions contained in the parent theme’s file and don’t need their own.

      For that reason, this file can be left blank for now. Simply create a text file with the name functions.php, and save it in your child theme’s folder:

      WordPress child theme location in FTP client

      Your theme is now almost ready to be activated and used. First, however, it will need a stylesheet.

      Step 2: Create Your Child Theme’s Stylesheet

      The next file you need to create is your theme’s Cascading Style Sheet (CSS). This file defines the styles that will be applied to your site’s pages and content. In other words, it enables you to specify the look of individual elements on your website. When people talk about updating styles, they’re usually referring to updating a site’s CSS file.

      Your parent theme will already contain a stylesheet, but a child theme’s CSS can be used to override those styles. We’ll look at how exactly this works later on.

      For now, you’ll just need to create the CSS file. To do this, once again add a text file to your wp-content/themes/storefront-child folder (or whatever name you used for your own child theme). This one should be called style.css:

      WordPress child theme location in FTP client

      You’ll also need to add some basic information. Copy and paste the following snippet into your new style.css file:

      /*
      Theme Name: Storefront Child
      Theme URI: http://example.com/storefront-child/
      Description: My first WooCommerce child theme
      Author: Your Name
      Author URI: http://example.com
      Version: 1.0.0
      License: GNU General Public License v2 or later
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      */

      These are the details about your theme that you’ll see when viewing it in a theme directory or in your WordPress dashboard. Feel free to replace the placeholder data with information more specific to you and your theme.

      Step 3: Configure the Child Theme to Inherit the Parent Theme’s Styles

      As we’ve already mentioned, you’ll want your child theme to use the parent theme’s default styles. However, you’ll also need to override the styles you want to change. This might sound complex — and CSS can indeed get tricky —  but at its core, the child will always use the parent theme’s styles unless it specifically contains a replacement.

      For example, let’s say your parent theme defines the style for h1 header elements as 20px and red. If the child’s style.css file does not contain an entry for H1 headers, then the parent style will be applied to all H1 content. However, if we were to add an H1 style to the child’s stylesheet that defined these headings as 18px and blue, it would override the parent’s directions.

      Adding this functionality to your child theme is actually very simple. All you need to do is to reference your parent theme in your child’s stylesheet.

      Simply add the following snippet after the information you pasted into the style.css file earlier:

      Template: storefront

      This code defines the parent theme and will ensure your child theme uses Storefront’s styles wherever you have not specified a replacement. If you’re creating a child for a different theme, you can simply use its folder’s name instead.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 4: Activate the Child Theme

      At this point, your child theme is now technically ready. It’s configured to work on your site, so let’s activate it and see how it looks.

      Go to Appearance > Themes in your WordPress dashboard, and you’ll see your child theme already installed:

      activating your WooCommerce child theme in WordPress

      Select Activate to make it your site’s current theme. You can now preview it from the front end:

      editing your WooCommerce child theme

      As you can see, it looks exactly the same as the original theme right now. While the child theme is active, all it’s doing is pulling in the styles from your parent theme. To customize its appearance, you’ll need to get creative with your child theme’s stylesheet.

      Step 5: Add Styles to the Child Theme

      Finally, it’s time to start styling your child theme. Exactly how you do this is up to you, your creativity, and what you want your store to look like. However, let’s walk through an example of what you can do.

      To illustrate how editing your child theme works, we’ll change the look of our store’s buttons. At the moment, they appear gray with black text, but we could update this styling to make them stand out more:

      editing your WooCommerce child theme

      Open your child theme’s style.css file again, and add the following code after the last */ in the file’s header:

      a.button,
      button.button,
      input.button,
      #review_form #submit {
      background: pink;
      color: red;
      }

      If you save your file and view it on the front end now, you’ll see the change in action. The buttons will now be a vibrant pink with red text:

      editing your WooCommerce child theme

      You can also make changes to your theme’s template files. You’ll just need to copy the template file you want to alter, such as header.php, from your parent to your child theme folder.

      However, you’ll also need to make some changes to specify which function WordPress uses to reference the template files. This requires using the get_stylesheet_directory(); function instead of get_template_directory() to reference your templates.

      To learn more about how to do this, you can read about all the templates that WooCommerce uses.

      At this point, you have created a WooCommerce child theme! Of course, there’s plenty more you can do, but you now know how to start tinkering. We recommend you brush up on CSS to get the most out of your styling!

      Create a WooCommerce Child Theme

      WooCommerce makes it easy to create an online store, and you can even change its look using the Storefront theme or one of many custom themes.

      However, you don’t have to rely on the creativity of others. Creating your own WooCommerce child theme is not as difficult as you might think, and it gives you nearly total control over the look and functionality of your store.

      Happy selling!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      shared hosting



      Source link

      How to Install WooCommerce on Your WordPress Website


      If you’re planning on using WordPress to create an online store, you’ll strongly want to consider installing WooCommerce. This plugin has become the de facto e-commerce solution for WordPress sites, thanks to its flexibility and a wide variety of customization options. However, given its wealth of features, it can be daunting to get started.

      Fortunately, WooCommerce is very easy to set up. Any e-commerce newbie can download, install, and configure the plugin to create a functional online store in no time. Even smaller tasks, like managing your products and configuring costs, are easy to handle.

      Getting Started With WooCommerce

      WooCommerce

      According to BuiltWith, WooCommerce powers 26% of all e-commerce sites. This makes it the most popular e-commerce solution in the world, and it’s not hard to see why. All you need is a WordPress site and the WooCommerce plugin to create a fully-functional, secure, and visually appealing store.

      What’s more, WooCommerce offers a lot of customization opportunities and scalability. The basic, free plugin will be enough for most online stores.

      WooCommerce also provides plenty of options to grow, scale, and expand your business as it becomes more successful. There are WooCommerce extensions, which add new functionality to your store, as well as dedicated themes like Storefront that help you perfect its appearance.

       

      With all of this in mind, it’s easy to see why you should consider WooCommerce when creating your online store in WordPress. It’s an excellent choice for beginners and experienced professionals alike. Now, let’s take a closer look at how the plugin works in practice.

      How to Install and Set Up WooCommerce (In 5 Steps)

      Creating and configuring your WooCommerce store is a pretty simple process. However, before you get started, it’s important to take a look at the recommended server requirements for WooCommerce:

      If your server does not meet these recommended minimums, your store will struggle, and it might not even work at all. One solution is to take advantage of our WooCommerce hosting plan:

      DreamHost WooCommerce hosting

      This plan comes with WooCommerce pre-installed, as well as several additional plugins and themes to make your store even better. Plus, essential considerations such as security, performance, and updates will be handled for you.

      Once you have your website and hosting plan ready, it’s time to create your WooCommerce store!

      Step 1: Install and Activate the WooCommerce Plugin

      WooCommerce WordPress plugin

      This first step is the most basic one. Simply install and activate WooCommerce just as you would any other plugin. As soon as you activate it, you will be presented with the WooCommerce setup wizard. This will help you configure your store, and we’ll look more closely at it in a moment.

      First, let’s see how activating WooCommerce has affected your site. Once WooCommerce is installed, you’ll find a number of new features, including:

      • Two new user roles: Customer and Shop Manager.
      • Widgets to help you display products in various ways.
      • Custom post types, taxonomies, and menu items.
      • Several shortcodes for inserting content into posts and pages.

      It’s worth noting that WooCommerce works a little differently on a WordPress Multisite install. Each site will share a database but store information in separate data tables. This setup makes each store its own separate entity. You will not be able to share information between the stores, such as user accounts, products, or checkout information. However, you can share extensions and themes across multiple WooCommerce sites.

      If you’re using a single WordPress site, you don’t need to worry about any of that.

      Now, it’s time to start configuring your store using the wizard we mentioned earlier.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 2: Add Your Store’s Basic Information

      The first thing you’ll see after activating the WooCommerce plugin is the setup wizard. This will help you set up your site in a few simple steps. It’s worth noting that any settings you configure here can easily be changed later.

      The first page of the wizard contains general information about your store. You’ll be required to enter your store’s location, for instance. If your business does not have a physical location but is entirely based online, you will still need to select your country:

      WooCommerce store setup wizard

      You’ll then need to choose the currency you want to use. Your store can only use one currency at a time, but if you want to display prices in various currencies, you can use a plugin like Currency Converter Widget.

      The last option asks what type of products you plan on selling: physical, digital, or both. There are more specific product types (which we’ll look at later), but for now, you can select the option that best suits your needs. The final option is a checkbox that you should only tick if you’re also planning on selling items in person.

      When you’ve entered all the required information, click on Let’s go! to proceed to the next step.

      Step 3: Set Up Your Payment Options

      The next phase of the wizard lets you enter the payment options for your store. Here you can choose which payment methods you want to accept:

      WooCommerce payment configuration options

      The choices you’ll see will differ slightly depending on your specified location and the options you selected on the previous page:

      • PayPal and Stripe are always available.
      • Square is available if you selected the option to sell items in person and if your store is located in the U.S., the U.K., Canada, Australia, or Japan.
      • Klarna is also available if your store is in the U.K., Norway, Finland, Sweden, Denmark, Austria, Germany, or the Netherlands.

      Select the options you want to use, and WooCommerce will install the necessary extensions. You can always remove and add payment methods later.

      The final option in this section asks if you want to accept offline payments. If you select this, a panel will appear with more detailed options, letting you choose all payment types you’re willing to use:

      configuring accepted payment methods in WooCommerce

      When you have picked all the payment options you’ll need, click on Continue to proceed to the next page of the wizard.

      Step 4: Configure Your Shipping Settings

      It’s now time to configure your shipping settings. As with the last step, the options here will differ depending on your location. Stores in the U.S. and Canada will see settings relating to USPS and Canada Post, respectively:

      WooCommerce shipping settings

      If you want to use these services, we recommend taking a look at their specific settings to help you settle on appropriate rates.

      Stores located elsewhere will instead only see the options for specifying the weight and dimension units you want to use in your store. Simply choose the correct units, then select Continue to progress.

      Step 5: Complete the Installation Process

      The final steps of the wizard offer some additional options to help you get your store off the ground. The Extras section contains two choices:

      WooCommerce extras settings screen

      The first one asks if you want to install the Storefront theme. This is the official WooCommerce theme, which is highly recommended, as it’s built specifically to support sites powered by WooCommerce.

      You can also choose if you want WooCommerce to calculate tax rates for you automatically. This may be a better option than manually entering tax rates, depending on your location and business. We suggest that you consult with a professional about how your business should handle taxes.

      When you select Continue, you’ll come to the final step. Here you can connect your store to Jetpack, a useful plugin that will activate several additional services (such as live rates and automatic taxes):

      connect WooCommerce to Jetpack

      Click on Connect with Jetpack or Skip this step to complete your installation. Your store is now ready to go! If you want to configure it even further, we recommend checking out the official documentation to see all the available options.

      Adding Your First Product in WooCommerce

      With your store up and running, it’s time to create something to sell. There are plenty of product types you can use, but for this example, we’ll create a “simple” product. This is the most basic and common product type, meant to be used for physical products that will be shipped and require no additional options.

      To create a product, go to WooCommerce > Products > Add New. This opens the Add new product interface, which should look familiar if you’re used to creating blog posts in WordPress:

      adding a new product in WooCommerce

      Start by giving your product a title and description. You can also assign it to one or more product categories to keep everything organized.

      To configure your product’s settings, you can use the Product Data meta box. You’ll spend most of your time here when managing products, as it covers the most essential information:

      WooCommerce product data

      The first option is the product type, so leave this as Simple product. Then, state whether the product is Virtual or Downloadable. The rest of this section consists of several panels with additional options:

      • General is where you can set the product’s Stock Keep Unit (SKU) and price.
      • Inventory can be used to manage the product’s stock levels.
      • Shipping lets you specify the product’s weight and dimensions.
      • Linked Products can be used to cross-promote similar products or to create product groups.
      • Attributes let you assign attributes to the product, which is a way to connect items with similar characteristics.
      • Advanced contains advanced options, such as the ability to set up orders for the product and create a purchase note.

      These are the basics for creating a product, but there’s plenty more you can do. For instance, you can add product images, create variable products, and learn more about the different product types.

      Feel free to experiment with the editor, and refer to the official documentation whenever you need help. It won’t be long until your online store is off the ground and your wallet is feeling the benefits of your hard work!

      Uninstalling WooCommerce or Reverting to an Earlier Version

      If you want to shut down your store for any reason, you can’t just deactivate and uninstall WooCommerce. This is because the actual store data, such as your settings, orders, customer details, and products, will still be saved in your database.

      To delete all WooCommerce data, you will need to make an edit to your site’s wp-config.php file. This is the file that controls your site’s databases. All you need to do is add a single function to it.

      Copy and paste the following code into your wp-config.php file:

      define( 'WC_REMOVE_ALL_DATA', true);

      Make sure to place this snippet on its own line, right above the final comment in the file. This will clear all WooCommerce data from your database.

      Finally, you should always use the most up-to-date version of your plugins. However, if you do need to install an earlier version of WooCommerce, perhaps for testing purposes, you can do so from the Advanced options on the plugin’s directory page.

      First, you will need to restore a previous backup of your store’s database and uninstall the plugin. You can then use the Previous Versions section on the plugin page to select the one you want:

      When you’ve selected the preferred version, click on Download to get a .zip file of the plugin. You can now upload and install the plugin as usual.

      Create Your Online Store With WooCommerce

      WooCommerce is a terrific option for WordPress users who want to create an online store. Its user-friendly design makes it possible for beginners and experienced users alike to turn their WordPress websites into e-commerce businesses.

      To get started, simply install and activate the plugin on your WordPress site and enter some details about your store and products. Then, you can start adding items to your shop.

      Are you looking to build a fast and secure WooCommerce store? Our WooCommerce hosting solutions can help you speed up your site and grow your online business!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      Managed WordPress Hosting - DreamPress



      Source link

      How to Add a Quick View Option to Your WooCommerce Products


      WooCommerce is an excellent tool for creating and managing an online store. However, there are some features it doesn’t include out of the box, such as a quick view option. Considering the importance of product displays for landing sales, this is a crucial missed opportunity.

      The good news is that, like many such issues in WordPress, you can solve this problem without too much trouble. Using the right plugin, you can easily add a quick view option to all of your products. This makes it easier for customers to examine and purchase items – and increase your conversion rate to earn more revenue!

      In this post, we’ll explain the many benefits of adding a quick view display option to each of your WooCommerce products. Then we’ll share two simple steps for doing so using WooCommerce Quick View Pro. Let’s get right to it!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      The Benefits of Including a Quick View Option for Your WooCommerce Products

      In online retail, a quick view display is a popup box that shows a product’s key details. This information might include one or several images, pricing, variations, and an Add to Cart button.

      An example of a WooCommerce quick view popup.

      Quick view displays are typically accessed by clicking a button or hovering over a product in a catalog or list view. For example, you might include quick views on your product category pages, so customers can see more information about individual products without having to navigate to their product pages.

      Quick view buttons on a product list page.

      This feature provides several benefits to your users. For instance, since they don’t have to navigate back and forth between your product lists and individual product pages, browsing becomes a lot easier. Guests can simply open the quick view display to see a product’s details, and then continue looking through the other items on the page.

      Additionally, quick view displays are an ideal place to include photo galleries, zoom options, and information about product variations and add-ons. With these additions, customers can get an up-close look at the items they’re interested in from multiple angles. They can also see each of the colors or other variations an item comes in.

      Finally, quick view displays with an Add to Cart button simplify the purchasing process. Customers can add multiple items to their carts without having to leave your category page or product list. This enables them to continue browsing without interruption, increasing the chances that they’ll buy more products.

      Ultimately, adding a quick view option is beneficial to both you and your potential customers. Enhancing your product displays with this handy feature is a simple way to make your e-commerce website easier and more enjoyable to use.

      How to Add a Quick View Option to Your WooCommerce Products (In 2 Steps)

      With the WooCommerce Quick View Pro plugin, adding quick view popup boxes for each of your WooCommerce products is fast and easy. Let’s look at how to configure and use this solution in just two steps.

      Step 1: Download, Install, and Activate WooCommerce Quick View Pro

      The first thing you’ll need to do is acquire WooCommerce Quick View Pro, and add it to your WooCommerce site. It’s important to note that you must already have WooCommerce installed and activated for this quick view plugin to work.

      To get started, head to the developer’s website and navigate to Plugins > WooCommerce Quick View Pro.

      Navigating to the plugins page on the Barn2 website.

      Here you’ll find information and pricing for the plugin; at this time, there isn’t a free version of this particular tool. Once you’ve purchased a license, you can download the WooCommerce Quick View Pro .zip file. You should also receive an email containing your license key. Make sure to take note of this, as you’ll need it to finish setting up the plugin.

      Next, make your way to your WordPress admin dashboard and navigate to Plugins > Add New. Click on Upload Plugin at the top of the screen.

      Uploading a new plugin.

      You can then select or drag-and-drop the .zip file containing the plugin, and hit Install Now. After the installation is complete, select the Activate button as well.

      Finally, with your license key in hand, access WooCommerce Quick View Pro’s settings by navigating to WooCommerce > Settings > Products > Quick View. The first field available should be the one for your license key.

      The License Key field.

      Add your license key here, then scroll down and click on the Save changes button. You’re now ready to start using the plugin.

      Step 2: Configure the Plugin’s Settings to Meet Your Needs

      Once you’ve installed and activated WooCommerce Quick View Pro, the plugin will automatically add a quick view display option to each of your products. However, you can also customize these displays to include the information you need by visiting the plugin’s settings.

      First, you’ll want to decide how your customers will open the quick view displays. You can use a button, enable the quick view to open when a customer clicks on the product image or name , or both.

      The quick view open settings.

      Leaving both of these options unchecked will disable the quick view displays entirely.

      The two fields below the Opening the Quick View check boxes will help you customize your Quick View button with your own text. You can also choose to add or remove the button icon. Next, you’ll need to decide what information you want to include in your popups. You have the option of an image, product details, or both.

      The quick view contents options.

      If you include images, you can choose to enable a gallery-style view and zoom functionality. Quick View Pro works great as a standalone WooCommerce gallery lightbox plugin. Both of these options are useful for customers who want to see variations on a product or get a closer look at fine details such as stitching.

      Using the zoom feature in a quick view display.

      If you choose to add product details to your quick view displays, you’ll also need to check the box for each item you wish to include. Your options are:

      • Reviews: These can provide social proof for your merchandise.
      • Price: An important detail for customers who are debating a purchase.
      • Short description: It helps to highlight features that could make an item more desirable.
      • Add to Cart button: A button makes purchasing fast and easy.
      • Meta information: This includes extra product information such as categories, tags, and SKU codes.

      Once you’ve selected all the information you wish to incorporate, your quick view displays will be ready to go. You can always come back here to change these settings, and your quick view displays will be updated automatically.

      A completed quick view display created with WooCommerce Quick View Pro.

      By default, the plugin adds your quick view displays to your category pages and other areas where customers may be browsing through several items. However, you can also incorporate them into product pages, too.

      Plus, all your quick view displays will be fully responsive for mobile shoppers. Quick view lightboxes like the ones you can create with WooCommerce Quick View Pro are especially helpful for giving customers a better look at your products on smaller screens.

      Design Your User Experience

      Detailed, easy-to-view product displays are essential to the success of your online store. With quick view displays, you can point out the best qualities of each of your products, simplify browsing, and speed up the purchase process. In some cases, this might even lead to an increase in sales.

      Are you ready to up the ante on your WooCommerce store? Consider DreamPress, our managed WordPress hosting solution. With automatic updates and strong security defenses, DreamPress takes server management off your hands so you can focus on what you do best: selling products. Learn more about plan options today.



      Source link