Knowledge Base

Customizing the Shopper theme (Woo)

Download WooCommerce theme ‘Shopper’ and install it on your WordPress site.

If default WooCommerce pages weren’t created for some reasons go to WooCommerce -> Status -> Tools and use the page installer tool:

If you set up new pages yourself, or want to change what pages are used for things like cart and checkout, you need to tell WooCommerce which pages to use.

To tell WooCommerce what pages to use for Cart and Checkout go to WooCommerce > Settings > Checkout.

Let’s start with a customization part: click ‘Customize’ at the upper part of admin panel -> Site Identity:

1. Site Identity

      • Upload a logo of size 235*67 px.
      • Enter a Site Title.
      • Enter an optional Tagline (A description of your site or motto).
      • Upload a Site Icon (Favicon).

2. Header 

Add header image (recommended size: 1950*500 px), set background color, text color, link color, link hover color.

3. Homepage Settings. 

To get Homepage looks like demo:

Go to Pages -> Add new: 

Enter Title that will be shown at your home page image, add short site description in wordpress editor and create a ‘Shop now’ button by adding this text in ‘Text’ mode of editor:

<a class=”button” href=”https://shopper.alidropship.com/shop/”>Shop now</a>

Select ‘Homepage’ template in page attributes, set up Home page image (recommended size is 1920*328 px) in Featured image and click ‘Publish’.

Go to Settings -> Reading :

You can set section that will be shown at your Homepage in Customize section:

4. Footer.

Set up background color, widget background color, heading color, text color.

5. Background.

Here you can set a background image, set its position and background color.

6. Color.

Set heading color, text color and link / accent color.

7. Buttons.

Customize buttons background color, text color, alternate button background color, alternate button text color.

8. Layout.

Choose layout you want to use.

9. Menus.

Shopper supports 4 menu locations: ‘Primary’, ‘Secondary’, ‘Footer’, ‘Social’. You can select which menu appears in each location.

  1. ‘Primary’ menu appears beneath the site logo, before the content.
  2. ‘Secondary’ menu appears at the top of the page, above the site logo.
  3. ‘Social’ menu appears at the right top of the site, next to the ‘Secondary’ menu.
  4. ‘Footer’ menu appears at the footer of the site.

You can customize, edit, add menus in Customize -> Menus sections:

More info on creating and assigning menus to theme locations at: WordPress.org Codex: Menu Guide.

10. Widgets.

Shopper theme has 7 widget regions:

  • Below header: widgets added to this region will appear beneath the header and above the main content.
  • Sidebar: widgets placed in the sidebar appear to the left or the right of the main site content, depending on which layout you chose.
  • Shop Sidebar: widgets added to this region will appear beneath the shop sidebar.
  • Footer * 4: The four footer widget regions are arranged into equal width columns dependent on how many regions are active.

11. Additional CSS.

You can add your own CSS in this section:

Here is the list of recommended plugins you can use with WooCommerce and this theme:

Instagram Feed

Pinterest RSS Widget

Simple Facebook Page plugin

Social Icons

Other recommended themes guides: 

Storefront

Flatsome

Claue

Did you find this article helpful?
42% of people found this helpful
Contact Us

Have any questions or need to get more information about the product? Either way, you’re in the right spot.

 +1 323-7395659
 AliDropship