duelling pixels https://duellingpixels.com Making eCommerce easier! Mon, 22 Aug 2016 07:24:17 +0000 en-AU hourly 1 https://duellingpixels-4b54.kxcdn.com/wp-content/uploads/2015/09/cropped-Duelling-Pixels_Logo_Web-100x100.png duelling pixels https://duellingpixels.com 32 32 Australian eCommerce store with WooCommerce https://duellingpixels.com/australian-ecommerce-woocommerce/ https://duellingpixels.com/australian-ecommerce-woocommerce/#respond Mon, 22 Aug 2016 07:12:59 +0000 https://duellingpixels.com/?p=13844 When setting up a an Australian eCommerce store with WooCommerce at first you might be confused and frustrated with the focus on the good ole’ USA during the installation and set up process.  Lucky, WordPress allows the administrator to easily configure their store for the Australian Market, let’s run through some of these settings. General WordPress […]

The post Australian eCommerce store with WooCommerce appeared first on duelling pixels.

]]>
Set up Australian eCommerce store with WooCommerceWhen setting up a an Australian eCommerce store with WooCommerce at first you might be confused and frustrated with the focus on the good ole’ USA during the installation and set up process.  Lucky, WordPress allows the administrator to easily configure their store for the Australian Market, let’s run through some of these settings.

General WordPress Settings

First up let’s change the install to the correct timezone and default language to something that is a bit more friendly to our Australian users, in your WordPress dashboard navigate to Settings > General.

Half way down the page your will see the Timezone option to the most appropriate zone to your location. Our turnkey Australian eCommerce websites are typically set to AEST (Australian Eastern Standard Time). Next you will be able to set your date and time display preference. Choose the most appropriate setting for how you would like the date and time to be displayed on your website.

And lastly, at the bottom of the page you will see an option called Site Language, from the dropdown tab select English (Australian) or if you prefer English (UK). This will control the default spell checking reference database and the language of the guides used in the Dashboard.

WooCommerce Settings

Let’s move over to the WooCommerce settings (navigate to WooCommerce > Settings) to configure our Australian eCommerce store location and tax settings.

Generally, if you have completed the WooCommerce setup configuration this page will be already configured already. But let’s just run over it anyway to make sure it is correct. Starting at the top we have over store location settings, from the dropdown menu option available select the Base location of your store, your Selling Location(s) who are you going to sell to? Just users in Australia, or are you going to sell globally.  If you would like to sell to specific countries only you can use the Sell to Specific Countries option from the dropdown and then list which countries you would like to sell to in the near field that appears under this option.

 Australian eCommerce store - Woocommerce-Settings - General Tab

 

Next, is 

Default Customer Location is the next option, here you can configure how the customers location is determined. We would recommend that you select Geolocate. Which will use IP lookup table to determined the customers location. If you are using a static caching plugin on your WordPress install and you are wanting to use the Geolocate option, you will need to  select Geolocate (with page caching support) as this will allow you store to be more friendly with caching plugins. (More about this feature can be read here)

If your online store will be charging GST or another state based tax on your Australian eCommerce store, you will need to tick the Enable Taxes option to turn on the taxes module.  Before leaving this page, set the Currency Options to:

  •  Currency  “Australian dollar ($),
  •  Currency Position “Left ($99.99)”
  • Thousand Separator “,”
  • Decimal Separator “.”
  • Number of Decimals “2”

And lastly save of changes.

If you are a GST registered business you will need to configure the GST tax for your store. Having ticked the Enable Taxes option above you should now see a Tax tab at the stop of the dashboard screen. Navigate to this tab, and we can configure the GST tax for your store. As the GST is national tax we are quite lucky that only one configuration is required, so let’s run through the configuration.

  • Enable Taxes – Yes, this will need to be enabled to charge GST
  • Prices Entered With Tax – Select whether your pricing will include GST or not.
  • Calculate Tax Based On: – This should set to Customer Shipping Address or Customer billing Address, although as we are only selling to Australia customers, it could be set Shop Base Address.
  • Shipping Tax Class – Set to Shipping tax class based on cart items
  • Rounding – leave unchecked
  • Additional Tax Classes – this can be ignored
  • Display Prices in the Shop: Include/exclude tax in prices on shop and product pages?
  • Display Prices During Cart and Checkout: Include/exclude tax in Cart and Checkout price display?
  • Price Display Suffix: Enter suffix to tax output, best to leave blank
  • Display Tax Totals: Set to itemised.

Once the tax configuration is right, we need to add the tax amount by navigating to the Standard Rates sub-tab.  Under the Standard Rates sub-tab a table will appear.

Starting from the left click on the Country Code cell enter AU and Australia will appear in a dropdown menu select Australia, and then tab across to the Rate cell and enter 10, and tab across to the cell called Tax Name and enter GST. The shipping cell should have the checkbox ticked, finally save your changes.

 

 Australian eCommerce store - WooCommerce GST Settings

 

Or optionally you will be able to import the GST Tax rate via the import CSV function and this CSV file, Australian GST WooCommerce Tax.

And that is all there is to it, to set a WooCommerce website to Australian settings.

 

 

 

 

 

 

 

The post Australian eCommerce store with WooCommerce appeared first on duelling pixels.

]]>
https://duellingpixels.com/australian-ecommerce-woocommerce/feed/ 0
Product Photography – 3 tips to great images https://duellingpixels.com/product-photography-tips/ https://duellingpixels.com/product-photography-tips/#respond Fri, 01 Jul 2016 02:34:22 +0000 https://duellingpixels.com/?p=13460 Preparing for a product photography shoot for your e-commerce website can take a a little extra time, but the rewards for your business will be priceless. Let’s run through our three points that will ensure a successful photographic product shoot. Create a product photography shot list This may seem like unnecessary admin work, however creating a shot list […]

The post Product Photography – 3 tips to great images appeared first on duelling pixels.

]]>
Preparing for a product photography shoot for your e-commerce website can take a a little extra time, but the rewards for your business will be priceless. Let’s run through our three points that will ensure a successful photographic product shoot.

Create a product photography shot list

This may seem like unnecessary admin work, however creating a shot list will help you determine the photos that are required for each product. Work back from how you see the product should be presented on your website. Start by writing down the views that your customer will be able see of each product.

Will it be just one photo per product or a couple of photos showing the product at different angles?

Will the product page show how your product works through a series of images?

All of these photos need to be outlined for the photography shoot whether it is in house or not. Visualise, and even do rough drawings, of the shots required. The more information that is put in the shot list, the less questions the photographer will have and the more likely you will get the outcome you intended.

Product Photography Shoot

Ensure products are correctly assembled and ready

The amount of time I have seen wasted by assistants on photo shoots trying to put products together, or a photographer’s face turning red in frustration because a product has been sent that requires assembly but with no instructions included. This will only mean that the photographer will spend more time on putting your product together and less time on photographing it. All of this measn that you will either end up with poorer quality product images or higher product photography costs for your business.

Use clean and undamaged products

Although last, this point is the easiest way to keep your product photography costs down. It is very common for businesses to send samples and demo products, this way they are potentially not losing usable stock. However, these items are more likely to be dirty or damaged, which will mean that your product images will have to be cleaned up in post production.

This will not only add to your costs, but also increase the turnaround time for product images. Ensuring all staff from the warehouse to the marketing department are aware that all products must be clean before being sent to the shoot will save you money and time.

The post Product Photography – 3 tips to great images appeared first on duelling pixels.

]]>
https://duellingpixels.com/product-photography-tips/feed/ 0
Shipping Zones – Understanding WooCommerce’s new feature https://duellingpixels.com/shipping-zones-woocommerce-new-feature/ https://duellingpixels.com/shipping-zones-woocommerce-new-feature/#respond Thu, 23 Jun 2016 07:57:56 +0000 https://duellingpixels.com/?p=13443 With the roll out of WooCommerce 2.6, one of the many new features the update included was Shipping Zones within the newly configured shipping module. Designed to help manage the shopping module in a more efficient way, shipping zones allows the shop manager to customise the available shipping methods for a particular geographical region. So what […]

The post Shipping Zones – Understanding WooCommerce’s new feature appeared first on duelling pixels.

]]>
With the roll out of WooCommerce 2.6, one of the many new features the update included was Shipping Zones within the newly configured shipping module. Designed to help manage the shopping module in a more efficient way, shipping zones allows the shop manager to customise the available shipping methods for a particular geographical region.

So what does this all mean? It’s actually quite simple, with shipping zones “local pick up” can be made only available to customers with certain postcodes or International shipping can only be made available for customers outside of your country, and certain couriers only be made available for in a particular state or city.

Let’s run through setting up a basic shipping zone.

First check that the base store location settings are configured correctly for your online store. In your admin dashboard navigate to WooCommerce  > Settings and check that the Base LocationSelling Location(s), and Shipping Location(s) in configured correctly for where you want to sell to and the Default Customer Location is set to Geolocate.

WooCommerce General Settings Shipping zones web

 

Once these settings have been double checked move over to the Shipping tab on the WooCommerce settings page, and you will see that the shipping page has has a new layout.  The shipping option settings are no longer on the first sub-tab, instead the first sub-tab is Shipping Zones, which contain a big meta box with a short description on how the new shipping zones work, and the default “Rest of the World” shipping method. We can ignore the rest of the world zone for the moment.

WooCommerce General Settings shipping zones

 

Adding a Shipping Zone

Click the Add shipping zone button and a new empty zone will be added at the top of the meta box with blank fields across the three columns of Zone Name, Region(s) and Shipping Method(s). Starting on the left, enter a name for the new zone, say “local” and then move across to the Region column.

We are based in Melbourne, so for us we would enter Australia > Victoria in the top field (only Victoria will appear once entered) and then enter the postcodes of  your surrounding suburbs (and the suburbs that you would like to allow local pick up) in the field below. Finally, save off your new shipping zone.

 

WooCommerce General Settings Shipping Zones local

Adding the Shipping Method

Next, move over to Shipping Method(s) column and click the Add shipping method link, a pop-up box will appear with a dropdown list that contains the available shipping methods within your WordPress install. Select “Local pickup’ and click the Add shipping method button. The pop-up box should disappear and the new settings will automatically save.

That’s it, pretty simple isn’t! And with a bit of creatively you can configure all sorts of combinations of shipping methods that would be benefitional to your customers.

For more information check out the WooCommerce shipping zones documentation.

 

The post Shipping Zones – Understanding WooCommerce’s new feature appeared first on duelling pixels.

]]>
https://duellingpixels.com/shipping-zones-woocommerce-new-feature/feed/ 0
WooCommerce Account page fix for Genesis themes https://duellingpixels.com/woocommerce-account-page-genesis-themes/ https://duellingpixels.com/woocommerce-account-page-genesis-themes/#respond Mon, 20 Jun 2016 07:28:09 +0000 https://duellingpixels.com/?p=13415 The latest update of  the WooCommerce ecommerce plugin includes a new tabbed My Account page template to a allow for easier user account navigation. Unless you have a purpose built WooCommerce theme, the new WooCommerce account page layout on the front end for users will be functional but won’t look that great for the user. From […]

The post WooCommerce Account page fix for Genesis themes appeared first on duelling pixels.

]]>
The latest update of  the WooCommerce ecommerce plugin includes a new tabbed My Account page template to a allow for easier user account navigation. Unless you have a purpose built WooCommerce theme, the new WooCommerce account page layout on the front end for users will be functional but won’t look that great for the user. From what I tested tested so far, the WooCommerce account page in Genesis Framework themes is not ideal and clunky at best.

Today we are going to run through a quick one minute fix that you can do to help clean things up on the account page.

WooCommerce Account Page

First up, login into your website install via FTP and navigate to /wp-content/plugins/woocommerce/templates/myaccount/ and copy the my-account.php to your the theme folder.

As this is a WooCommerce template file, we will need to ensure that we copy the template folder hierarchy within our theme folder.  Create a folder called “woocommerce” in the top level of your theme’s folder. Then within this woocommerce folder create another folder called “myaccount”, and lastly add the new my-account.php file to this myaccount folder.

So the location of this new file should look something like this: /wp-content/themes/Your-theme-folder/woocommerce/myaccount/my-account.php

Notice that our new template folders within our theme’s folder is similar to the WooCommerce template folder structure from templates directory onwards. Any file that you copy across from the WooCommerce template directory (plugin) to the new template directory within your theme’s folder will become the template that your WordPress application will use. You can read more about WooCommerce’s template structure here.

Once you have moved the my-account.php file, open the file in you favourite php editing software. You should see the following:

View the code on Gist.

To help control the layout of the account page we are going to add some standard Genesis Framework column classes to the template. Pretty much all of Genesis child themes have these classes in their style.css file. If you are not sure please open your theme’s style.css file and search for “one-half”, if nothing can be found add the following css coding from this page  to your style.css file.

Back to our template file, move to line 29 which contains the code “ do_action( ‘woocommerce_account_navigation’ ); ?>”  and add the following lines of code above and below line 29.

View the code on Gist.

This will now create a container for the account menu that will now only take up the first quarter of the page vertically.

Next, on line 31 which contains the following code “<div class=”woocommerce-MyAccount-content”>” add the class “three-fourths” to the div classes,( ie next toe the woocommerce-MyAccount-content class with the quotation marks) . So your file should look something like this.

View the code on Gist.

Now, if navigate back to you website and load up the My Account page on the front end, and you will now see the user account menu appears on the left side of the page and the content the right.

Add a bit styling to your WooCommerce account page

Time to fix up the styling, moving back to your FTP program and open your theme’s style.css. Navigate/search for the plugins section or the WooCommerce section if there is one and the following css rules. This will remove the dots on the menu item and change the menu to horizontal format for mobile devices.

View the code on Gist.

So that it, pretty easy isn’t!  If you are more comfortable with theme file editing, feel free to download the template files.

 

The post WooCommerce Account page fix for Genesis themes appeared first on duelling pixels.

]]>
https://duellingpixels.com/woocommerce-account-page-genesis-themes/feed/ 0
Add Google Fonts with Kirki to the Customizer https://duellingpixels.com/google-fonts-kirki-customizer/ https://duellingpixels.com/google-fonts-kirki-customizer/#comments Thu, 09 Jun 2016 08:47:16 +0000 https://duellingpixels.com/?p=13380 Adding the right Google fonts to your website can be a time consuming exercise if you don’t know what you are looking for, or what particular look you are after For most folk this because they can not say “yes I like that” until they see it in the website itself.  Adding a Google Font is […]

The post Add Google Fonts with Kirki to the Customizer appeared first on duelling pixels.

]]>
Adding the right Google fonts to your website can be a time consuming exercise if you don’t know what you are looking for, or what particular look you are after For most folk this because they can not say “yes I like that” until they see it in the website itself.  Adding a Google Font is done by using the wp_enqueue_style function in the theme’s function file.

Example:

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300|Raleway:500', array(), CHILD_THEME_VERSION );

And then simple add the font-family to the css files in the appropriate classes:

body {
 color: #000;
 font-family: 'Roboto', sans-serif;
 font-size: 16px;
 font-size: 1.6rem;
 font-weight: 300;
 line-height: 1.625;
 }

To change the Google font that you want to use, you would simply change the font family name and weight, and then change these details in the theme’s css files as well.

Changing from the Roboto font to the Open Sans font would like this:

Roboto font
 wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300|Raleway:500', array(), CHILD_THEME_VERSION );

Open Sans font

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700', array(), CHILD_THEME_VERSION );

and then again in the theme’s css files:

font-family: 'Roboto', sans-serif;

would change to:

font-family: 'Open Sans', sans-serif;

So for the general user, selecting and implementing a Google font combination for their website can be a big pain in the butt, one has to change the fonts manually by swapping back and forth between the theme’s function and css files and refreshing the browser each time to access and review the font choices.  Yes, there are css/php editing programs that can search and replace words, and yes I can here you designers out there shouting that’s why you get a designer to to select your fonts and then you don’t have to go through this process.

But sometimes people just like to do themselves, or at least attempt to do it themselves.

Adding Google fonts to the customiser

Introducing Kirki 

The Kirki Customizer plugin offers a simpler path to adding Google Fonts and other theme options to the customiser panel within WordPress. The plugin can be download via the WordPress Plugin Directory for free and there is no pay addons. So it just free!

The plugin extends the Customizer’s functionality and allows for simpler coding to be used to add theme options. For a demonstration we are going to show you how to add a Google Fonts option to your theme.

Adding Google Fonts with Kirki

As we work within the Genesis Framework, we will doing the demonstration with the Genesis Sample theme. However this can be easily adjusted for any of the Genesis themes or general WordPress theme. Firstly, install the Kirki plugin to your WordPress install via the Plugins > Add New or by uploading the plugin via an ftp program to your plugin folder, and finally activate the plugin.

With the Kirki plugin installed we can can add a configuration by adding code snippets to the theme’s customize.php file. Using an FTP program or something similar, navigate to your theme’s directory.

Then within your theme’s directory folder navigate to and open the file  lib > customize.php. If there is no lib directory or customize.php file, create the directory and file, and include – require_once( get_stylesheet_directory() . ‘/lib/customize.php’ ); in you theme’s function file.

As most of themes have some form of customisation options, you will need to navigate to the bottom of the code that is currently in thecustomize.php file and paste the following code snippet . Let’s run through the code so you understand how it words. In the first function ( lines- 12- 23 ) we register a new section within the customiser’s options panel called Fonts. Then we populate the new panel with Google font options to allow us to customise our website (lines 28 – 111) . Within this snippet, we target three particular areas of your website. They are the Site Title font selection ( lines 30 – 53 ), Headings font selection ( lines 56 – 79 ), and lastly the body font selection ( lines 82 – 105).

View the code on Gist.

Save off the customizer.php file and then in your WordPress dashboard navigate to the Appearance > Customiser. Towards the top of your customiser options panel on the left, you will now see a new Fonts option. When you open this panel you will see three drop down menus under the headings Site Title Font Family,  Heading Font Family and Body Font Family.

Voila! Now you can play to heart’s content with the endless array of Google font pairings!

 

Now you know how it all works, here is a shortcut. Download this file customizer_google_fonts.php, unzip the file and upload it to your theme’s lib directory,  your-theme > lib. Then add this line of code to your theme’s function file, and Voila!

View the code on Gist.

To check out more ways to add options to the WordPress customiser with Kirki visit the plugin documentation page

The post Add Google Fonts with Kirki to the Customizer appeared first on duelling pixels.

]]>
https://duellingpixels.com/google-fonts-kirki-customizer/feed/ 2
New Turnkey eCommerce Websites https://duellingpixels.com/turnkey-ecommerce-websites/ https://duellingpixels.com/turnkey-ecommerce-websites/#respond Fri, 03 Jun 2016 07:26:05 +0000 https://duellingpixels.com/?p=13322 Turnkey eCommerce Websites – Coming very soon! We are super excited to announce something that we have been working on for the last few months. Setting up an eCommerce website today can be tricky and confusing at the best of times. There are so many pieces of the puzzle that are required to be put together, elements that are online […]

The post New Turnkey eCommerce Websites appeared first on duelling pixels.

]]>
Turnkey eCommerce Websites – Coming very soon!

eCommerce Australia Post integration

We are super excited to announce something that we have been working on for the last few months.

Setting up an eCommerce website today can be tricky and confusing at the best of times. There are so many pieces of the puzzle that are required to be put together, elements that are online and offline. In truth, we have not met a client or potential client who has not correctly estimated the task required in setting up an eCommerce store. 

There are payment gateways, website/user security, legal information (required by Australian law), and postal/delivery integration to set up – just to name a few. Not to forgot, there are the offline processes to sort out too. What actually happens when you get an order, what is the process to fulfil the order?

Yes, there are solutions like SquaresSpace, BigCommerce, Shopify and Weebly that help put together some of the above online pieces, but unfortunately, they don’t really cater for the Australian store owner.  They charge in US dollars, and on top of the monthly hosting fee they can charge transaction fees for each sale. Then there is still the payment gateway fee to come out. And last but not least, as this is all charged in US Dollars you get slugged by your bank for currency conversion.

All this eats into your profits.

And still, you have only SOLD the product, not sent it yet. Most of these solutions do not have an Australian postal or courier service integrated into their system, so you will find yourself manually figuring out delivery costs.

The only solution really is build a custom website yourself or contract a developer to build one for you. Both options have associated costs whether it is time or money, that for a small store owner may be too much.

So we are throwing our hat into the ring.

Announcing DownUnder eCommerce. 

A range of turnkey eCommerce websites with Australia Post integration. Deployed on our servers in Sydney, DownUnder eCommerce is a hosted and managed-software solution powered by WordPress and WooCommerce. 

Take a sneak peek…. 

These pre-made website packages offer an awesome list of features including:

  • No Setup required!
  • Simple monthly or yearly billing
  • No transaction fees from us
  • Stripe and Paypal payment gateways
  • SSL Certificate included
  • Device responsive designs
  • Australia Post parcel integration
  • On page SEO tools
  • MailChimp integration
  • Google Analytics integration

Check out the full list of features

We are currently putting the final touches together, you can subscribe here to be the first to hear about DownUnder eCommerce’s availability.

The prebuilt websites are almost ready

Please join our mailing list to be the first hear when they are ready.

Please wait...

Thank you for signing up!

The post New Turnkey eCommerce Websites appeared first on duelling pixels.

]]>
https://duellingpixels.com/turnkey-ecommerce-websites/feed/ 0
WooCommerce & Genesis Theme setup – Part 2 https://duellingpixels.com/woocommerce-genesis-theme-setup-part-two/ https://duellingpixels.com/woocommerce-genesis-theme-setup-part-two/#respond Thu, 26 May 2016 09:20:09 +0000 https://duellingpixels.com/?p=13240 Part two of our WooCommerce & Genesis Theme website step by step set up guide, we install and integrate the StudioPress's Daily Dish Pro theme. In this guide we run through adding pages, navigational menus and populating the sidebar with content.

The post WooCommerce & Genesis Theme setup – Part 2 appeared first on duelling pixels.

]]>
WooCommerce & Genesis Theme Setup Part 2

Genesis Theme Integration

We set up our online store in the WooCommerce & Genesis Theme setup – Part 1 blog post last week, now it’s time to select and add a theme to our store.

Let’s dive in straight in to it.

As usual in your dashboard navigate to Appearance > Themes and click the Add New button. A page will load up that looked very similar the plugin page, but this time it is all about themes that you can install. As we are setting up a e-commerce store with WooCommerce, it is best we select a theme that accommodates styling and functionality for WooCommerce.

Some great Genesis themes that are built for WooCommerce are JessicaLine it up , Paton and Novelity. But that said, you do not have to use a theme built for the WooCommerce, and if you think a certain design is better suited to your audience or branding, you should select this one.

For this tutorial we are going to run through setting up a theme StudioPress’s Daily Dish Pro, a traditional based design that I think will make a great looking simple online store.  Daily Dish Pro is not built for WooCommerce, so we will run through the steps to demonstrate how it is done.

To start with let’s login to your StudioPress account and download both the Genesis Framework theme and the Daily Dish Pro theme. ( Purchase the theme, non affiliate link) Once downloaded to your computer we can install the themes to your website, navigate to Appearance > Themes and click on the Add New Button at the top of the page, and then the upload theme button. (Which is in the same spot as the Add New button on the refreshed paged.)

We can only install one theme at a time, so firstly upload the Genesis Framework zip file that you just downloaded but do not activate the theme. The Genesis Framework theme is a parent theme it does not need to be activated, it just needs to be installed in the same WordPress install. Next upload and install the Daily Dish Pro theme and activate upon installation.

Upon activation you should see a admin error notification at the top of the page that says:

Your theme does not declare WooCommerce support – Please read our integration guide or check out our Storefront theme which is totally free to download and designed specifically for use with WooCommerce.

To correct this issue we need to install two plugins, one is called  Functionality by Shea Bunge, and the second is called Genesis Connect for WooCommerce by StudioPress. Navigate to Plugins > Add new, then search and install each plugin as per previous plugin install instructions in part one post of this series.

It is best to first install and activate the Functionality plugin by Shea Bunge. Upon activation of the Genesis Connect for WooCommerce a full screen message will appear with the following notice.

Sorry! In order to use the Genesis Connect for WooCommerce plugin you need to do the following:

Add this code to your child theme’s functions.php:

add_theme_support( ‘genesis-connect-woocommerce’ );

« Back

 

Copy the add_theme_support( ‘genesis-connect-woocommerce’ ); to your clipboard and click the browser back button and then navigate to Plugins > Edit Functions. On the new admin screen you will see the white box with the following code within it.

<?php
/*
Plugin Name: Your website name
Plugin URI: http://your-website-url.com
Description: A site-specific functionality plugin for (Your website name) where you can paste your code snippets instead of using the theme's functions.php file
Author: Studio
Author URI:
Version: 2016.04.18
License: GPL
*/

Just below this code, paste the add_theme_support( ‘genesis-connect-woocommerce’ ); text into this box and click the Update File button at the bottom of the page. If you have done this correctly, the WooCommerce error message should now disappear.

Without getting too technical the Genesis Connect for WooCommerce helps WooCommerce and your Genesis theme sort out which page template to use for certain areas of your website, because in these particular areas they both have certain page structures which can often conflict with each other

Adding a website pages

With our theme implemented we can now start to configure the website menus, page templates and sidebar widget. But before you do this it is our suggestion that you add any non store pages like your about page, contact page and terms conditions, and populate the pages with content if you have not so already. Navigate to the Pages > Add new menu in your dashboard to do this. Create a new page for each page that you would like to appear on your website.

A basic list of pages to add would be:

  • About
  • Contact/Address Details
  • Legals/Terms & Conditions
  • Returns Policy

You don’t have create all of them now, as you can come back at any time to create a page. Now that we have pages in the system, let’s set up a menu to allow our users to navigate around our website.

Menu Set up

Daily Dish Pro comes with two menu locations, the primary menu is below the website header, and the second menu appears above the website header.

Let’s set up the primary menu first, in your WordPress dashboard navigate to Appearance > Menus.  Most of what you should see is a greyed out elements on the page. This because there are no menus available. To create your first menu, enter a menu title in the Menu Name field and click the Create Menu button on the right side of the screen. The menu name can be any word really, it more for reference purposes for when there are multiple menus.

WordPress Menu Setup Creating a Menu

 

Once your new menu has been created the meta boxes on the left will no longer be greyed out, and you will be able to add elements from your website into the menu.  To do this click the corresponding checkbox of the element that you wished to add and then click the Add to Menu button. Note, multiple elements can be added at the same time.  As we are setting up the main navigational menu for the website, we will add the following pages – About, Shop, My Account and Contact.

 

WordPress_Menu Setup Adding new items to Menu

 

After the menu items have being added to the menu they will appear in the Menu Structure window on the right. You can drag and drop the menu items into the order you would like them to appear, and if you click on the grey triangle on the right side you can edit the menu item title. As an example we could change the “My Account” page menu item to “Account” for simplicity. For the menu to appear on the front end of your website simply check the location checkbox that you would like the menu to appear in under Menu Settings. As this is our main menu we are going to tick the Primary Navigation Menu check box. Once you have completed implementing the menu structure save off your changes, and repeat the process for the secondary menu area.

 

WordPress_Menu Setup Structure Location

 

Website Layout

The Genesis Framework allows the page layout to be set for an overall website layout, but also on a page by page basis.  To set the overall layout i.e. default layout for your website, navigate (in your WordPress Dashboard) to the Genesis menu item and scroll down to the Default Layout metabox.

There should three options with the Daily Dish Pro theme. Sidebar left,  Sidebar right and full width layout (no sidebar).  Depending on the amount of products you have, you may or not need a sidebar. If you have few products I would suggest not having a sidebar and instead use the menu items to assist in product catalog navigation for users. If you have a large selection of products and or you have a number of different types of products, a sidebar with product category and tag navigational links could be useful for your users in navigating around your product catalog.

 

Genesis_Default_Layout_settings

For the purposes if this tutorial, select sidebar right and scroll down to the bottom of the screen or back up to the top of the page and save the settings.

Sidebar Content

In WordPress to populate the sidebar area with content we use widgets, which are little blocks of code that are used to pull various information from within your website or from an external website.

Navigate to Appearance > Widgets, at first sight this page will seem a little confusing. However, it is a quite simple concept what is been displayed here. On the left (first two columns) are widgets ‘packets of functionality’ and on the right (the white boxes ) are the designated widgets areas of your theme, these are areas that has been deigned to take these widgets.

To populate the sidebar area we are going to add widgets to the Primary Sidebar area.  From the left side of the screen drag and drop the widgets elements that you would like to see in the primary sidebar area. As we are setting up an online store adding widgets like WooCommerce Basket, WooCommerce Product Categories, WooCommerce Product Tags or WooCommerce Product Search to sidebar area are good way of adding product navigational elements for the user. Review the available widgets on the left side of the screen and add the widgets that you would like to see in your sidebar area.

And so there are the basic steps to setting up a WooCommerce website with a Genesis Framework theme. Have any questions? Shoot through a comment in the comment form below.

 

The post WooCommerce & Genesis Theme setup – Part 2 appeared first on duelling pixels.

]]>
https://duellingpixels.com/woocommerce-genesis-theme-setup-part-two/feed/ 0
WooCommerce & Genesis Theme setup – Part 1 https://duellingpixels.com/woocommerce-genesis-setup/ https://duellingpixels.com/woocommerce-genesis-setup/#respond Wed, 18 May 2016 10:12:39 +0000 https://duellingpixels.com/?p=13181 First up, let’s make a plan! This is where most e-commerce websites go wrong, or costs sky rocket out of control. With a lack of a plan each decision you make as you go along will impact your choices further into the WooCommerce store step up, and you may not like those available choices. From […]

The post WooCommerce & Genesis Theme setup – Part 1 appeared first on duelling pixels.

]]>
WooCommerce Australian e-store setup

First up, let’s make a plan!

This is where most e-commerce websites go wrong, or costs sky rocket out of control. With a lack of a plan each decision you make as you go along will impact your choices further into the WooCommerce store step up, and you may not like those available choices.

From our experience, most e-commerce websites take months to get launched after the initial development, as the owner has not entirely thought through the online and offline components right to the end. We try to tell them, but it’s just in one ear and out the other.

Detailing out a plan, and working out from the start how many items you are going to sell, where you are going to sell to, which payment gateways you are going to use, and how are your customers going to receive your goods, this will not only give you confidence in the website set up, it will also make the website set up a lot easier and a lot less stressful.

Actually, map out the expected process for the buyer, and detail out each point. Yes, EVERY little point, from how the user lands on your home page before navigating to your online shop catalog, to will they use a side menu to sort through products or use the main menu.

Here are some quick points that you should have covered in this plan.

Product

  • What are you selling and not selling?
  • How many products are you going to have?
  • What categories and tags will they be sorted by?

Design

  • How will the user navigate around you website, is there going to one or two menus, and where will these menus be?
  • Will your products have images, and how many per image?
  • What information will there about each product?

Store

  • What payments are you going to except?
  • What notifications and communication will the buyer receive after purchasing a product or service?
  • What legal documents do you need to have for state and federal laws?
  • What tax do you need to collect?
  • How will the customer receive their purchased goods?
  • If shipping products, whats costs and processes are involved with sending the products.

These are not the all of items that your plan should cover, but it should at least get you started. And remember the more you outline in the plan the easier it will be to implement the store. And the more RELAXED you will be with the implementation.

To keep it simple in the series of blog posts we are going to take you through the setup of e-commerce store operating out of Melbourne, Australia, that will sell to Australian customers only.  From this guide you will be able to modify the setup to your location, and your customer’s location. We are also going to integrate Paypal and Strip payment gateways to offer payment flexibility for the customer, and lastly we will integrate Australia Post for the delivery of items.

All of this will be achievable for the cost of…. NOTHING!  Marvellous WordPress! Well it’s not not entity free, there is your time to put it together and of there is the time developers used to put the software together that they give away for free. So  please make sure you give the plugin developers a nice rating on the WordPress plugin directory.

We are going to make a few assumptions, including that you have WordPress installed and a SSL certificate installed. If you do not have a SSL certificate installed please contact your website host about installing one. If you are planning to add a store to your existing website, I would strongly recommend that you deploy the e-commerce section on a duplicate copy of your website before deploying it on your live website to make sure there are no issues that might occur.

Ok, are you ready to start?

 

Installing WooCommerce

To start with let’s install the required plugins – WooCommerce, Paypal and Strip payment gateways and Australia Post plugins. Login to your WordPress website and navigate to Plugins > Add new.

Move to the Search Plugins field on the right hand side, and type in “WooCommerce”, a large list of WooCommerce related plugins will be appear ( 2,597 items in total).  Hopefully, you should be able to see plugin just labelled  “WooCommerce”, by WooThemes.

Click the install button for this plugin and then activate the plugin on the following screen.

 

DuellingPixels installing a plugin

 

Once activated you should see notice at the top of the screen as follows “Welcome to WooCommerce – You’re almost ready to start selling :)” with Run the Setup Wizard button, click on this button.

 

Running the Setup Wizard

This will launch a full screen on boarding 5 step process that will take you through the basic store step up, which includes setting up store pages, setting store location, currency, product weight units and product measurement units.  Please note all the settings can be changed at a later date within the WooCommerce settings, so don’t feel you have to answer all of them.

Lets go through each page:

 

After reading the welcome message and a confirmation that you would like to proceed, the first page details out the page set up required to run WooCommerce correctly. Lucky, we can hit the continue button and the pages will automatically be set up for us.

On the next screen, you can set your store location, click on the country drop down and simply type ‘Australia’ in the field for first question, and a list will appear with a choice of Australia States to select as location.  Once your location has been set, the following questions will automatically populate with the correct currency and unit measurements that are standard in your country.  These should be ‘Australian Dollars ($’), ‘kg’ and ‘cm’ respectively, confirm the inputs and click continue.

 

DuellingPixels WooCommerce Location Setup

 

Moving on to the Shipping & Tax screen, if you are selling a downloadable product and are not collect GST Tax you can simply skip this section and click continue. If you are planning to ship items or charge GST let’s quickly run through this section.

The basic shipping module that comes default with the plugin uses a standard shipping cost on a per order basis or a per item basis. As we are planning to add Australia Post integration to our e-commerce store, we can skip over this question.

If you will be charging GST, tick the ‘Will you be charging sales tax?’ checkbox, then enter whether the pricing will be inclusive or exclusive of GST. Unfortunately, as the defaults of the WooCommerce plugin is geared towards the good old U.S.A., there are no Import Tax Rates to import. We will run through setting up GST tax rates later on in these tutorials.

Clicking continue we move onto the Payments screen, this will give you option to select which default payment options you would like to setup. The default online payments are Paypal and the default offline payments are Cheque Payments, Cash on Delivery and Bank Transfer (BACS). If you wishing to use Paypal enter you email address for your Paypal account and tick the corresponding checkbox for each offline payment you would like to offer your customers.

And finally the last screen, which has nothing to set. Yeah!!  Either select the “Create your first Product” button or the “Return to the WordPress Dashboard” text at the bottom of the module to return to the dashboard.

 

 

Now that you have completed the basic WooCommerce setup, technically you are ready to go and can add a few products to your store and start selling. However, this is a very basic store that doesn’t give many payment options for your customers, a rudimentary shipping setup that you could lose money on. So, let’s take your store a bit further down the ‘developed” line and give our customers a better shopping experience so you can sell more products.

 

 

Installing WooCommerce add on plugins

To extend our e-commerce store with the functionality that our customers are more suited to we need to extend WooCommerce with some extra plugins.  For the Stripe payment gateway there are many plugins available in the WordPress Plugin that you can use, for this lesson we are going to run with the officially WooCommerce supported plugin. Open a new browser tab and head over to WooThemes and download a free copy of their Stripe plugin.

Once downloaded, jump back to your Dashboard browser tab and navigate to Plugins > Add New. Familiar territory? This time we are going to upload the plugin instead of installing from the WordPress plugin directory. At the top of the page, next to the Add Plugins title, click on the Upload Plugin button, then click on the Choose File button. Select the zip file that your just downloaded which should be called “woocommerce-gateway-stripe.zip”, upload it to your WordPress install and once uploaded activate the plugin.

While we are in the admin plugin install page, lets install our Australia Post integration plugin, navigate to the Plugins > Add New and search for Australian Post WooCommerce Extension by Waseem Senjer. As with before once you have found the right plugin, click the install button and activate.

 

 

WooCommerce Store Details

Ok, we have the WooCommerce add ons installed, lets check through the rest of our newly added store settings, navigate to WooCommerce > Settings, and you should see a screen with 7 tabs across the top will load up, which are General, Products, Checkout, Accounts, Emails and API.

We will run through these tab by tab, and setting by setting to ensure you will be familiar with each one. Please fell free to jump ahead at any point, and grabbing a coffee now is also a great idea! No really, I mean it, grab that coffee or cup tea!

General Tab

     General Options

Base Location – This is your store base location, this should be already set to the configuration that was set during the on boarding process.

Selling Location(s) – This is the location/s  where you are willing to sell to, as we will only selling to Australians, set this to Australia.

Default Customer Address – This allows you to predetermine the customer’s location before they enter their shipping address via the user’s IP address to determine their location. As we want to only to sell to Australians we are going to set this to Geolocate.

Store Notice – this give you an option to set a store notice that will appear at the top of the page, a good option to use while you set up our e-commerce store.

 Currency Options

Currency – Should match the configuration on that was set during the on boarding process, otherwise adjust as required.

Currency Position – Set the position of the dollar sign

Thousand Separator – Set the character for the thousand dollar separator

Decimal Separator   – Set the character for the thousand dollar separator

Number of Decimals –  Set the number of decimals places to be used.

Save Changes!

Products Tab

General 

Measurements

Weight Unit – Should match the configuration that was set during the on boarding process, otherwise adjust as required.

Dimensions Unit  – Should match the configuration that was set during the on boarding process, otherwise adjust as required.

 Reviews

Product Ratings – Are you going to have product ratings or not? We would suggest that it is best to leave it off at the moment.

Save Changes!

Display 

Shop & Product Pages

 Shop Page – the page that your product will display on, this should match the configuration that was set during the on boarding process, otherwise adjust as required.

Shop Page Display – Select whether to show products, products categories or mixture of both.

Default Category Display – When viewing a product category, would you like your users to see the subcategories or the products of the category.

Default Product Sorting –  Select how you would like your products to be sorted.

Add to cart behaviour

Options:

Redirect to the cart page after successful addition, ie send the customer straight to the cart page to complete purchase after adding a product to the cart.

Enable AJAX add to cart buttons on archives – removes page reloading after a customer has added an item to the cart.

Product Images

This options set the main image sizes for the products on the various shop pages. Please take note that after adjusting the image size changes you will need to regenerate the thumbnails to reproduce the images the new size.

Product Image Gallery – Option whether to have a Lightbox view on product image or not.

Inventory

Manage Stock – Select whether to manage stock quantities or not. If you are selling non psychical goods like ebooks or downloads this should be left unchecked.

Hold Stock (minutes) – How many minutes should the stock item be held for in an unpaid shopping cart before the purchase is cancelled and the item place back in the store.

Notifications – Turn on low stock / no stock stock notifications

Notification Recipient(s) – The email address the notifications should be sent to.

Low Stock Threshold – Low threshold notification point.

Out Of Stock Threshold – Out of Stock notification point.

Out Of Stock Visibility – if an item is out of stock, should customer still be able to view it on the store.

Stock Display Format – Option on how to display stock levels, select your preference.

Downloadable Products

File Download Method – Generally force download is best.

Access Restriction – Should the user be logged in or not to download product.

– Grant access to downloadable products after payment enable whether to give access to the down able product after payment or not.

Tax Tab

Tax Options

If you are not registered for GST this section can be skipped, just make sure that Enable Taxes checkbox is unchecked. If you are registered for GST, let’s run through the tax configuration options.

Enable Taxes – Yes, this will need to be enabled to charge GST.

Prices Entered With Tax – Select whether your product pricing will include GST or not.

Calculate Tax Based On: – This should set to Customer Shipping Address or Customer billing Address, although as we are only selling to Australia customers, it could be set Shop Base Address.

Shipping Tax Class – Set to Shipping tax class based on cart items

Rounding – Leave unchecked

Additional Tax Classes – This can be ignored

Display Prices in the Shop:  Include/exclude tax in prices on shop and product pages?

Display Prices During Cart and Checkout: Include/exclude tax in Cart and Checkout price display?

Price Display Suffix: Enter suffix to tax output, best to leave blank

Display Tax Totals: Set to itemised.

Standard Rates

Moving to the “Standard Rates’ tab, we will now add GST as the standard rate. Clicking on the insert on button, a row of cells will appear above the button.  As GST is national tax, we only need to fill out some of these fields. Clicking on the Country Code cell enter AU and Australia will appear in a dropdown menu select Australia, and then tab across to the Rate cell and enter 10, and tab across tone cell to Tax Name and enter GST. The shipping cell should have the checkbox ticked, finally save your changes.

You can also import the Australian GST tax rate via this csv file, Australian GST WooCommerce Tax.

Checkout Tab

Checkout Options

Coupons – Are you going to offer discount coupons or not? Best to leave blank if undecided.

Calculate coupon discounts sequentially – If having coupons, can multi coupons be used sequentially or not?

Checkout –   Enable guest checkout do you what to our customers to purchase items without creating an account.

Force secure checkout – Force SSL protocol, if you have an SSL installed this should be ticked.

Checkout Pages

Cart Page – The page that your cart will display on, this should match the configuration that was set during the on boarding process, otherwise adjust as required.

Checkout Page – The page that your checkout sequence will display on, this should match the configuration that was set during the on boarding process, otherwise adjust as required.

Terms and Conditions – If you have Terms and Conditions for your store, set the page that outlines your terms and conditions. Also note in setting this will create checkbox in the checkout process that the customer will have to agree to to complete checkout.

Checkout Endpoints

Best to leave settings as default.

Payment Gateways

Gateway Display Order – Set the order of the payment gateway options, use the hamburger icon on the left to drag ’n’ drop the gateways into your preference display order.

BACS

BACS – If you wish to offer bank money transfer available for payment, enable checkbox and review the Description and Instructions fields,  then add your bank account details into the table.

Cheque 

Cheque  – If you wish to offer Cheque Payment available for payment, enable checkbox and update the Description and Instructions fields with your postage details.

Cash on Delivery

Cash on Delivery – If you wish to offer cash on delivery available for payment, enable checkbox and update the Description and Instructions fields with your details and terms, enter which shipping methods COD is available for. Lastly uncheck Accept COD if the order is virtual.

PayPal

PayPal is great payment gateway that trusted by the majority of internet users, so it is a great payment gateway to have activated.

Title – Leave as PayPal.

Description – Leave as is.

PayPal Email –  Enter the email address used by your Paypal account, this should match the configuration that was set during the on boarding process, otherwise adjust as required.

PayPal Sandbox – Leave unchecked.

Debug Log  – Leave unchecked.

Advanced options –  Best to leave these as default.

API Credentials – Although these are optional, I would recommend following the instructions (here)  and enter the  your Api credentials so refunds can be automatically process from your WordPress Dashboard.

Save Changes!

Stripe

The Stripe payment gateway requires a SSL certificate to be installed for your website, so if you do not have one installed you will to be able to use this gateway. Please check with your host to determine if one is installed.

Title –  Leave as Credit card (Stripe).

Description – Leave as pay with your credit card via Stripe.

Login to Stripe and generate some api keys in your account settings https://dashboard.stripe.com/account/apikeys and enter the API keys in respective field here.

Live Secret Key

Live Publishable Key

( If you wish to run some tests, you can generate test API key in Stripe and enter the keys in the Test settings )

Capture – Tick the Capture charge immediately checkbox.

Stripe Checkout – If you wish to use the Stripe default checkout pop up modal, tick this checkbox.

Stripe Checkout locale – Select the language of choice for the payment instruction tho be in.

Bitcoin Currency– Leave un ticked!

Stripe Checkout Image – An option to add your business logo to Stripe payment screen.

Saved Cards – Tick Enable Payment via Saved Cards checkbox.

Logging – Leave unchecked.

Save Changes!

Shipping Tab

Shipping Options

Shipping Calculations – Check Enable shipping checkbox.

– Check Enable the shipping calculator on the cart page checkbox.

– Optionally, check Hide shipping costs until an address is entered checkbox.

Shipping Destination – Set the default shipping address, or only ship to billing addreess

Restrict shipping to Location(s) – Set to ship to all countries you sell to

Shipping Methods – set the order of how the available shipping methods will be displayed, use the hamburger icon on the left to drag ’n’ drop the methods into your preference order.

Save Changes!

Flat Rate – Settings

Enable/Disable – Check to enable this shipping method.

Method Title – Title for this shipping method on the front end in the checkout process.

Availability – Set to allowed countries.

Tax Status – Set to taxable if your charging GTS, otherwise set to none.

Cost – Set you flat rate shipping price.

Save Changes!

Free Shipping

Enable/Disable – Check to enable this shipping method.

Method Title – Title for this shipping method on the front end in the checkout process.

Availability – Set to allowed countries.

Free Shipping Requires… – Set the requirements for the order to receive free shipping.

Minimum Order Amount – Set the required total cost amount to receive shipping.

Save Changes!

International Flat Rate

Skip this method delivery as we are only going to serve customers in Australia.

Local Delivery

Woocommerce-Settings - Shipping Tab - Local Delivery

Enable/Disable – Check to enable this shipping method.

Title – Title for this shipping method on the front end in the checkout process.

Fee type – How is the cost calculated.

Delivery Fee – Delivery Cost.

Allowed ZIP/Post Codes  Enter which in postcodes Local Delivery is allow.

Availability – Set to allowed countries.

Save Changes!

Local Pickup

Woocommerce-Settings -Shipping Tab - Local Pickup

Enable/Disable – Check to enable this shipping method.

Title – Title for this shipping method on the front end in the checkout process.

Fee type – How is the cost calculated.

Allowed ZIP/Post Codes – Enter which in postcodes Local Delivery is allow.

Availability – Set to allowed countries.

Save Changes!

Australia Post Settings

Woocommerce-Settings- Shipping Tab - Australia Post Settings

Enable/Disable – Check to enable this shipping method.

Title – Title for this shipping method on the front end in the checkout process.

API Key – Australia Post API settings, could use default or generate your own Api keys via link below.

Shop Origin Post Code – Enter the postcode of your shop base, i.e. where the product will be sent from.

Default Package Weight  – Default product weight.

Default Package Width – Default product width.

Default Package Height – Default product height.

Default Package Length – Default product length.

Enable Debug Mode – Uncheck.

Delivery Time – Check if you would like to show an estimated delivery time on the Checkout page.

Save Changes!

Accounts

Account Pages

Woocommerce-Settings - Accounts Tab

My Account Page – Use default “My Account”.

My Account Endpoints – Best to leave these alone as editing them could generate errors.

Registration Options

Enable Registration

Select whether to have a registration form on the Checkout and My Account page if the user is not sign in.

Select whether to display returning customer login reminder on the “Checkout” page.

Account Creation – Both “Automatically generate username from customer email” and “Automatically generate customer password” should be checked.

Save Changes!

Emails

Woocommerce-Settings - Emails Tab

Email Notifications –  The modification of the default email notifications requires changes in the templates files, so it best to leave these to an experienced developer.

Email Sender Options

“From” Name – Enter your store or personal name.

“From” Address – Enter the email address that notifications come from.

Email Template

Header Image – Enter the Url to a business logo image file to appear at the top of all WooCommerce Emails.

Footer Text – Text that will appear at the bottom of all WooCommerce Emails. We would recommend contact details and social media links.

Base Colour – Option to adjust the base colour of the email to your branding colours.

Background Colour – Option to adjust the background colour of the email to your branding colours.

Body Background Colour – Option to adjust the body background colour of the email to your branding colours.

Body Text Colour – Option to adjust the body text colour of the email to your branding colours.

Save Changes!

API Tab

Woocommerce-Settings - API Tab

General Setting API  It is best to leave all the settings with the API tab on the default settings.

Adding a Product

Now that our store functionality is setup we will now populate our store with some products to see how our store looks and functions onto front end. Navigate to Products > Add New, to which a standardise WordPress edit screen will load up, with the following components – Title field, Editor metabox, Product Short Description metabox, and lastly the standard metaboxes down the right side.

To add a product to your store these components correspond to the following areas on you product page.

Title – The title of your product

Editor – This is for the long description of your product and will appear under the description tab on the product page.

Product Data –  Entails all the product specific data like SKU, pricing, size etc

Product Short Description – This is like an excerpt for a normal post this text appears under the title and product data on the front end.

Metaboxes – The standard metaboxes are present, like Publish, Categories, tags and product image provides the main/featured image for the product, along with a product gallery metabox to generate a product gallery on the front end.

The Product Data tab contains the main configuration controls for each product, as we want to populate some products to see how our store looks we will not run through all the options here, just the basic to get you started. WooCommerce has some great documentation and videos on the product data that you can view here ( https://docs.woothemes.com/document/managing-products/)

Start generating couple of products by a adding product with some basic information, like title, description, price and feature image. Or you can import WooCommerce’s dummy data by downloading here, and then importing it via the WordPress import tool in your dashboard  Tools > Import.

Once you have 4 or 5 products it’s time to check out what your store will look like on the front end. Open a new browser and type in your website address in the Url bar followed by /shop/, ie http://your-web-address.com/shop/. Your website should load with your products displaying in a three column grid.

Congrats, your e-store website is up an running!

At this point you should run through some tests to see what is working and what is not.  Run though a couple of test purchases, either set the payment gateways you are using to sandbox mode or drop your product pricing to something low, test purchases can easily be refunded too.

Now as you run through a couple purchasing tests I am sure that your are not 100% happy with the way your website looks. It’s time to implement one of our Genesis themes.

In next blog post of this series we will run through setting up Genesis theme with WooCommerce.

The post WooCommerce & Genesis Theme setup – Part 1 appeared first on duelling pixels.

]]>
https://duellingpixels.com/woocommerce-genesis-setup/feed/ 0
Taking control of the WooCommerce styles https://duellingpixels.com/taking-control-woocommerce-styles/ https://duellingpixels.com/taking-control-woocommerce-styles/#respond Thu, 05 May 2016 09:26:30 +0000 http://duellingpixels.com/?p=12581 The WooCommerce plugin is a great way to build an e-commerce store on your WordPress blog or website without coding required. Sometimes though the default styling does not always suit your theme, here are two options to override the default WooCommerce styles when using a Genesis child theme. Option 1 – Using the Themed Toolbox plugin If you […]

The post Taking control of the WooCommerce styles appeared first on duelling pixels.

]]>
The WooCommerce plugin is a great way to build an e-commerce store on your WordPress blog or website without coding required. Sometimes though the default styling does not always suit your theme, here are two options to override the default WooCommerce styles when using a Genesis child theme.

Website Styling - Taking control of WooCommerce styles

Option 1 – Using the Themed Toolbox plugin

If you are unfamiliar with any code editor programs,  install a css plugin on your WordPress install. I personally think  the Themed Toolbox plugin is great for the job. This plugin adds a number of tools including a really cool dashboard css editor to use with any Genesis child theme. But as a css editor it really excels, you can import your current style sheet and edit accordingly or you can add a secondary supporting stylesheet. I would recommend using the second option and add a secondary supporting stylesheet. This will mean that you will not destroy theme’s current stylesheet. Plus as a bonus (also I think the best feature of this plugin) is that you have post revisions went editing the secondary supporting stylesheet. This gives great freedom for folk who like to carve out the website design in the browser.

Option 2 – Disable WooCommerce Styles

The second option is to disable the default WooCommerce css and add you own. The best way to do this is open the woocommerce.css file (/wp-content/plugins/woocommerce/assets/css/woocommerce.css ) in you WordPress install via an ftp program and copy all the styles to a section in your theme’s style.css file. I generally place it under the plugins section.

Next add the following code into your theme’s function.php file:

View the code on Gist.

This will disable the default WooCommerce styling, to which the styling that you added to your theme’s style.css file will now control how your e-commerce store pages by default will look.

Edit these styles classes in your theme’s style.css file as you see fit so your e-commerce store pages will match your theme’s styles.

The post Taking control of the WooCommerce styles appeared first on duelling pixels.

]]>
https://duellingpixels.com/taking-control-woocommerce-styles/feed/ 0
Drip-feed content via your WordPress website https://duellingpixels.com/drip-feed-content-via-wordpress-website/ https://duellingpixels.com/drip-feed-content-via-wordpress-website/#respond Thu, 21 Apr 2016 00:41:14 +0000 https://duellingpixels.com/?p=12719 Controlling the delivery of content to a user via a drip-feed membership website is a great way to establish yourself as an authority, while maintaining control on how your users digest the content. In this post we will run through setting up a drip fed online self help guide that will deliver a new article each […]

The post Drip-feed content via your WordPress website appeared first on duelling pixels.

]]>
Online marketing with drip-feed contentControlling the delivery of content to a user via a drip-feed membership website is a great way to establish yourself as an authority, while maintaining control on how your users digest the content.

In this post we will run through setting up a drip fed online self help guide that will deliver a new article each day for 5 days.  We are going to use the free WordPress plugin Paid Membership Pro and the add-on Series: Drip-Feed Content.

Install Paid Membership Pro to your WordPress website if do not already have it installed:

  • Navigate to your plugins page in the Dashboard
  • Click the Add New button at the top of the page and then search for Paid Membership Pro in the plugin search field on the right-hand side
  • Once Paid Membership Pro is listed in the plugins list, click the install button and then activate.

To install the Series: Drip-Feed Content add-on:

  • Download the plugin files Github (here) via the download zip button
  • Back in your dashboard, click the Add New button again and then the Upload Plugin button at the top of the screen
  • Select the zip file that you just downloaded and then install and activate.

Now that you the two plugins installed and activated you should see two new menu items – “Memberships” and “Series” in your WordPress Dashboard screen.

Adding your drip-feed content

Before we set up the the membership and the delivery of the drip feed content, let’s first add the actual content of this series to your website.

Navigate to the Pages menu and create a new page for each of the individual articles that you are planning to drip feed. For organisational purposes I would suggest creating a parent page with a small introduction about the series of content that these articles could sit under, this will also keep the pages together in the admin pages list.

To do this firstly create your parent page, then for each additional page that you create within the series, select the parent page from the Parent dropdown at the top of the Page Attributes metabox on the righthand side of the screen.

Setting up a parent page - Delivering drip-feed content via a membership based website
Setting up a parent page

So once each page has been set up you should have something like this:

Parent Page and Sub page example - Delivering drip-feed content via a membership based website
Parent Page and Sub page example

Now that we have organised the content together, let’s set up the membership that the user will need to join in order to receive the drip feed content.

Setting up the membership

Navigate to the Memberships > Membership Levels menu item in the WordPress dashboard, then click the Add New Level button.  Fill out the new membership setup, adding a membership name, description, and confirmation message.

If it is a paid membership, fill out the billing details as required.

If it is not a paid membership leave the billing details blank, and the rest of the settings can be left un-ticked as well. Lastly, don’t forget to save your membership level.

Setting up the drip-feed series

Ok, we are almost there, with the content organised and the membership level created, it’s time to finish this little project by integrating the drip feed release of information once the user has registered to the membership. Moving up to the Series menu item within the Dashboard menu, click the Add Series button.

Enter your series title and a description in the main editor field, this page on the front end will act as your sales page for the series. Moving down to the Posts in this Series metabox, add your previously generated pages, and set how many days the release is delayed by.

PaidMembershipPro Series Metabox - Delivering drip-feed content via a membership based website
PaidMembershipPro Series Metabox

To set up the series, select the first page in our series “Day 1 – Better Gut” from the Post/Page dropdown menu on the left, and as this is the first piece on the content in the series we are going to leave the Delay field empty. This will mean that the user will gain instant access to this tutorial upon subscribing to the membership .

PaidMembershipPro Series Selecting a Post/Page in the series - Delivering drip-feed content via a membership based website

PaidMembershipPro Series Selecting a Post/Page in the series.

Next, using the Add to Series button on the right, add the following tutorials and set the delay field with a sequential number. With our Better Gut Self Help Guide, we are going release each new tutorial on a daily basis, so our delay fields are going be 0, 1, 2, 3, 4 for each respective tutorial, as in the image below.

PaidMembershipPro Series Content - Delivering drip-feed content via a membership based website
PaidMembershipPro Series Content

Now that is it, yeah! It’s time to tell the world about your wonderful ‘Better Gut Self Help Guide’ series. When folk sign up to your guide, they will receive an email each day telling them about the release of new content.

The post Drip-feed content via your WordPress website appeared first on duelling pixels.

]]>
https://duellingpixels.com/drip-feed-content-via-wordpress-website/feed/ 0