Hello friends,

Today we will learn together how to edit the shop page. Link:  http://kreme.mthemes.org/style2/shop/?orderby=rating&filter_color=blue

This page contains 4 sections need to setup: Top sidebar, Category, Filter, Bottom sidebar as below image:

1_ Top Sidebar

Create sidebar: Go Appearance -> Theme options -> Sidebar Settings: Create sidebar with name ” Shop Top Sidebar ” if  not available. Click Add new button:  https://www.screencast.com/t/gWHjOE6lD

Assign sidebar: Go Theme Options -> Shop -> General, Choose shop layout is:  Fullwidth Style 2, Choose  “Top Sidebar Select” is  “Shop Top Sidebar” create in step above. Then click Save changes button

shop-2

shop-4

Add content for sidebar: Go Appearance -> Widgets. Add widget “mTheme Jumbotron” to sidebar “Shop Top Sidebar“. https://www.screencast.com/t/hdXjqUGz

Enter value for widget mTheme Jumbotron:  https://www.screencast.com/t/6Nh01L8Oa34

2_ Category

Go Appearance -> Theme Options -> Shop -> Layout Setting -> Choose categories: Add New a category, or edit, or delete.

shop-7

shop-8

3_ Filters

Create attributes: Go Products -> Attributes, Add the attributes you want to use. Sample: Color, Food Type, …

shop-9

– Add Color attribute:

2017-05-26_2246

– Add items for color attribute:

2017-05-26_2248

2017-05-26_2249

Do the same for other properties.

Create sidebar for each properties: Go Appearance -> Theme options -> Sidebar Settings. Create some sidebars below if  not available:

2017-05-26_2252

Nav Filter will show selected properties

Assign sidebar: Go Theme Options -> Shop -> Layout Setting -> Choose attributes for filter. Creating properties that you want to show

2017-05-26_2256

Do the same for other properties.

Assign widget to sidebar: Go Appearance -> Widgets: Add widget “WooCommerce layered nav” to sidebar “Advanced Filter Product Line”

2017-05-26_2300

2017-05-26_2301

 

2017-05-26_2302

2017-05-26_2303

Add widget “WooCommerce layered nav filters” to sidebar “Nav Filter”

2017-05-26_2303

4_ Bottom Sidebar

Create sidebar: Go Appearance -> Theme options -> Sidebar Settings: Create sidebar with name ” Shop Bottom Sidebar ” if  not available. Click Add new button:  https://www.screencast.com/t/DLSoL15fvd

Assign sidebar: Go Theme Options -> Shop -> General, Choose shop layout is:  Fullwidth Style 2, Choose  “Bottom Sidebar Select” is  “Shop Bottom Sidebar ” create in step above. Then click Save changes button.

2017-05-26_2309

Then Go Tab: Layout setting, Choose sidebar for “Nav Filter Sidebar Select”

2017-05-26_2310

Create content for sidebar:

Go Theme Options -> Widgets:

+/ Add widget ” mTheme Call To Action” to sidebar “Shop Bottom Sidebar”

2017-05-26_2314

+/ Add widget “mTheme Compare” to sidebar “Shop Bottom Sidebar”

2017-05-26_2315

Need to help, please contact with us. Email: dvkiem1985@gmail.com  | Skype: kiem.dinhvan

Thank for reading!

 

How to translate text to your language

If you do not want to use multiple languages for your site but just want to translate some strings into your language then Loco Translate Plugin is one of the choice.

You can use wpml plugin for multilanguage site. This article instructs you to translate text using the Loco Translate plugin.

  • Step 1: Install plugin

Go Dashboard -> Plugins -> Add New

add-plugin

Enter text “Loco Translate” to find plugin, Click Install now button

install-02

Wait some time to install completed. Then click Active button

  • Step 2: Translate text in theme kreme

Go Dashboard -> Loco Translate -> Themes

translate-theme-01

Click theme to translate

translate-02

Click New language

https://www.screencast.com/t/ICTeGEYp 

Then choose a language, choose a location, then Click Start translating button

translate-3

Find text to translate, translate it in your language, then click Save button

tranlate-02

Translate text display on front end

translate-03

  • Step 3: Translate text in plugin kreme

Go Loco Translate -> Plugin -> choose kreme plugin

plugin-01

Choose language to edit

plugin-02

Choose text and translate it

plugin-03

 

That all. Thank for reading!

How to custom your logo

You can custom your logo without using default logo style of theme by some custom css code.

Go to Dashboard -> Visual Composer -> Custom CSS:

custom-logo-01

  • Step 1: Remove default style
#logo:before {
   background-color: transparent;
}
.header.style-v1 #logo:after {
   display: none;
}
  • Step 2: Custom logo size
.header.style-v1 #logo img {
   max-width: 100%;
}

100% will show origin image size. You can custom size in px. Example: 100px;

  • Step 3: Custom logo size when scroll
.header.style-v1 .header-middle-inner.stuck #logo img {
   max-width: 71px;
}

You can custom size in px. Example: 71px;

  • Step 4: Upload your logo image

Go Dashbard -> Appearance -> Theme Options -> General -> Logo

custom-logo-02

All custom css you can copy from Here

That all. Thanks for reading!

Leave A Comment

*
*