Storefront Kuteshop Woodmart Woocommerce Theme

Kuteshop Theme Setting

In this article we will discuss about Storefront Kuteshop and Woodmart Theme setting

1. Kuteshop Theme Setting

• Header and Footer Logo default dimension 255 x 64
• Products Image default dimension : 850/1038
• Single Image default dimension : 235/450

1.1. Revolution Slider Image Dimension (Kuteshop)

• According to W3School : 1024×768 pixels
• Commonly used widths are: 1920px  / 1600px  / 1400px  / 1366px  / 1280px  / 1024px
• For full screen can set: 1700 x 700 pixels

2. Storefront Theme

Store front is very good theme. You can know more from below link

1. Header Customization
2. Menu Customization
3. Sidebar Customization

2.1. Header Customization

Some Major Header customization is described below

/* CSS Code for Header Image Setting */

 .site-header .site-branding img {
     height: auto;
     max-width: 167px;
     max-height: 100px;
     margin-left: 12px;

/* CSS Code for Header Image Margin Setting */
 }
.hentry .entry-header {
     margin-bottom: .617924em;
 }
/* CSS Code for Header Image Margin Setting */

 .site-branding {
 margin-bottom: 10px;
 }

To change the header font color in your Storefront theme, you can add custom CSS code to your WordPress site. Here's an example of the CSS code you can use:


/* Change the header font color */

.site-header .site-title a, 
.site-header .site-description {
    color: #000000; /* Change this to your desired color */
}

2.2. Menu Customization

/* Change the menu font color */

.primary-navigation ul li a {
    color: #000000; /* Change this to your desired color */
}

/*CSS Code for Primary Menu Margin Setting*/
 @media (min-width: 768px) {
 .primary-navigation li a {     font-size: 16px;           padding-left: .6em !important;     padding-right: .6em !important; }
 }
/* CSS Code for Primary Menu Color Setting */
 .storefront-primary-navigation,
  .main-navigation ul.menu ul.sub-menu{
  background-color:#1E73BE;
  }

/* CSS Code for Primary Menu Color Setting */
.storefront-primary-navigation {
clear: both;
background-color: #75BA21;
}

2.1. How to Remove Sidebar (Any Theme)

Go to dashboard -> Then go to Appearance -> Then click on Customize -> Click on Additional CSS -> Finally Add code in text box -> Finally click on Publish button. Codes given bellow

.content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}.content-area .site {
margin:0px;
}

2.2. How to Remove Add to Cart (Storefront)

Go to theme dashboard -> Appearance -> Customize -> Additional CSS -> The you will get a large text box. Here you write below code

.site-header-cart .cart-contents {display:none;}

2.3. How to Reduce Header Space (Storefront)

.site-header {
line-height: .1;
padding-top: .617924em;}

2.4. How to Reduce Logo Image (Storefront)

.site-header .site-branding img {
max-width: 130px; }

2.5. How to Reduce H1 Linehight (Storefront)

h1, .alpha {
line-height: .14;}

2.6. How to Remove Post Meta, Leave Comment (Storefront)

.hentry .entry-header .posted-on, .hentry .entry-header .post-author, .hentry .entry-header .post-comments, .hentry .entry-header .byline {
font-size: 0.875em;
display: none;}

2.7. How to Remove Footer Information (Storefront)

.site-footer a:not(.button) {
color: #333333;
display: none;}
.site-footer {
color: #6d6d6d;
display: none;}

For only footer credential

.site-footer a:not(.button) {
color: #333333;
display: none;}

Footer WordPress Color : #23282d

2.8. How to Edit Footer Information (Storefront)

If You want to modify credential text the go to this patch. In the file: themes>storefront>inc>storefront-template-functions.php

Copy the line 118-142

if ( ! function_exists( 'storefront_credit' ) ) {
	/**
	 * Display the theme credit
	 *
	 * @since  1.0.0
	 * @return void
	 */
	function storefront_credit() {
		?>
		<div class="site-info">
			<?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = '© ' . get_bloginfo( 'name' ) . ' ' . date( 'Y' ) ) ); ?>
			<?php if ( apply_filters( 'storefront_credit_link', true ) ) { ?>
			<br />
			<?php
				if ( apply_filters( 'storefront_privacy_policy_link', true ) && function_exists( 'the_privacy_policy_link' ) ) {
					the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
				}
			?>
			<?php echo '<a href="https://woocommerce.com" target="_blank" title="' . esc_attr__( 'WooCommerce - The Best eCommerce Platform for WordPress', 'storefront' ) . '" rel="author">' . esc_html__( 'Built with Storefront & WooCommerce', 'storefront' ) . '</a>.' ?>
			<?php } ?>
		</div><!-- .site-info -->
		<?php
	}
}

2.9. How to Setup Storefront Pro Version

2.9.1. At first create an account on woocommerce.com/storefront

2.9.2. Then add to cart and purchase. After purchase you will get below instructions through registrant mail

Storefront Extensions Bundle	1
Storefront Parallax Hero	1
Storefront Powerpack	1
Storefront Mega Menus	1
Storefront Product Hero	1
Storefront Blog Customizer	1
Storefront Homepage Contact Section	1
Storefront Product Sharing	1
Storefront Footer Bar	1
Storefront Hamburger Menu	1
Storefront Reviews	1
Storefront Pricing Tables	1
Storefront	1

2.9.3. To make the most of these products, login to WP Admin and go to WooCommerce > Extensions > WooCommerce.com Subscriptions and connect your WooCommerce.com account.

2.9.4. Then click on Approve for authorization. This will allow WooCommerce.com to view your subscription information, available extensions, and serve updates to your WordPress site.

2.9.5. Below is a list of extensions available on your WooCommerce.com account. To receive extension updates please make sure the extension is installed, and its subscription activated and connected to your WooCommerce.com account. Extensions can be activated from the Plugins screen.

2.9: Color Change:

Change Header Menu Color: #75BA21

Change Footer Header Menu Color: #00438B

Change Footer Header Menu Color: #006FB9

Change Footer Header Menu Color: #004573

Pootlepress Menu Color: #FF7575

WordPress Menu Color Deep: #23282D

WordPress Menu Color Light: #32373C

3. WoodMart Theme Setting

Brand attribute: If you like to show brand image in your product page select desired attribute here

Compare page: Select (Select a page of compare table. It should have the shortcode shortcode: [woodmart_compare]) By default it is not exist

Wishlist page : Select (Select a page of wishlist table. It should have shortcode shortcode: [woodmart_wishlist]) , By default it is not exist

Enable promo popup : ON

Promo popup text: Place here some promo text or use HTML block and place here it’s shortcode. Insert shortcode into texbox = [html_block id=”212″]

Product Page: It has some configuration

Additional tab content : Shortcode

Woodmart Image Size

Home Menu Front Default Image Size: 300×250

Category Menu Image Size : 118×118

How Subscriber/Author/Editor can get access in woocomerce products to entry a product ?

How to show Header option in Woodmart theme

How to change logo in Woodmart theme

How to display multiple size set of a product?

Woocommerce Shortcode

• [featured_products] : Show all featured products
• [products limit=”9″ columns=”3″ visibility=”featured” ] : Show 9 featured products in 3 column
• [products limit=”4″ columns=”4″ visibility=”featured” paginate=”true” ] : Show 4 featured products in 4 column with paginaiton

Video Tutorial

Subject	Video Link
Storefront – Ecommerce	youtube.com/watch?v=f5Jcd6fI7v4
Storefront- tips	pootlepress.com/2020/05/21-tips-tricks-and-css-tweaks-for-woothemes-storefront
Storefront	njengah.com/customize-storefront-theme/
Storefront Extension	youtube.com/watch?v=cLy-x4DCyko
Variation Product	youtube.com/watch?v=ERKXg9rUAdg
Variation Product	youtube.com/watch?v=Mk-vxwcPf3o
Variation Product	youtube.com/watch?v=-o6HC2ISdZ4
Storefront Pro	youtube.com/watch?v=Sk-1DIlh2UE
Woocommerce Shortcode	youtube.com/watch?v=QlMYxIgc0Oc
Woocommerce Shortcode	docs.woocommerce.com/document/woocommerce-shortcodes
Storefront Mega Menu	docs.woocommerce.com/document/storefront-mega-menus
Storefront Powerpack Demo (Woocommerce)	youtube.com/watch?v=cLy-x4DCyko&t=98s
Custom Icon	wordpress.com/support/widgets/social-media-icons-widget/#available-icons