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
- Header Customization
- Menu Customization
- 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 |
Trackbacks/Pingbacks