woothemes Tag Archives - Page 3 of 3

How to Move the Navigation Menu Outside of Header for Storefront

February 26, 2015 By John 9 Comments

Here’s another tweak that you can do on the Storefront theme.

If you want to move the main navigation/menu below or outside the header, you just need a few lines of code. There is no need to create a new header.php file on your child theme. Instead, just add this piece of code to your child theme’s functions.php file and you’re all set.

function child_theme_init() 
{
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
add_action( 'storefront_before_content', 'storefront_primary_navigation', 5 );
}
add_action( 'init', 'child_theme_init' );

Before you do this, do know that it’s not really recommended to move the styles outside of its original location. After doing this, you will need to redo all the menu styles and that’s a lot of work.

Now you know how to move the navigation menu outside of header for storefront theme. Hope this worked for you. If not, feel free to post a comment and we’ll see what we can do to help you out.

How to Change the Arrows in Pagination for Storefront and WooCommerce

March 18, 2015 By John 2 Comments

When looking at category pages for posts and WooCommerce products in Storefront theme, you can navigate to different pages by clicking on the default left and right pointing arrows. Notably, most themes would use a “Previous” or “Next” text instead of an arrow. If you want to change these arrows to text, it is easy enough to do by tweaking a few lines of code. Just follow the steps below.

Change the Arrows in Pagination for Storefront Theme

Since Storefront does not have a default filter for pagination, we’ll need to remove the function of the default pagination and replace it with our own function. Notably, the code in the function `woa_sf_paging_nav_replace` is just a copy of the original pagination function in Storefront and we just need to replace the text in the ‘prev_text’ and ‘next_text’ parameters. You don’t need to touch the other attributes.

Go to your functions.php and find the following code:

---- php-code ----

add_action( 'init', 'woa_sf_change_pagination_init' );
 
 
function woa_sf_change_pagination_init() {

 //remove current function used for Storefront's pagination
      remove_action( 'storefront_loop_after', 'storefront_paging_nav', 10 );

 //replaces pagination function with our own function
      add_action( 'storefront_loop_after', 'woa_sf_paging_nav_replace', 10 );
}
 
 
function woa_sf_paging_nav_replace() {
 
 global $wp_query;

      $big = 999999999; // need an unlikely integer
      $translated = __( 'Page', 'storefront' ); // Supply translatable string

      echo '<nav class="storefront-pagination">';

      echo wp_kses_post( paginate_links( array(
           'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
           'format' => '?paged=%#%',
           'current' => max( 1, get_query_var( 'paged' ) ),
           'prev_text' => '<',
           'next_text' => '>',
           'type' => 'list',
           'total' => $wp_query->max_num_pages,
           'before_page_number' => '<span class="screen-reader-text">' . esc_attr( $translated ) . ' </span>',
 ) ) );

 echo '</nav>';
}

---- /php-code ----

Where it says:

'prev_text' => '<',
'next_text' => '>',

Change it to:

'prev_text' => 'Previous',
'next_text' => 'Next',

Change The Arrows in Pagination for WooCommerce Products

Editing the pagination for WooCommerce products is a bit simpler. We just need to find and use the filter `woocommerce_pagination_args`.
Head over to your functions.php and look for:

---- php-code ----

woa_wc_change_pagination_init() {

    add_filter( 'woocommerce_pagination_args', 	'woa_wc_woocommerce_pagination' );
}

function woa_sf_woocommerce_pagination( $args ) {

	$args['prev_text'] = '<';
	$args['next_text'] = '>';

	return $args;
}

---- /php-code ----

Where it says:

$args['prev_text'] = '<';
$args['next_text'] = '>';

Simply change it to:

$args['prev_text'] = 'Previous';
$args['next_text'] = 'Next;

Or replace ‘<‘ and ‘>’ to whatever text you prefer.

You just learned how to change the arrows in pagination for Storefront and WooCommerce. Did this post help solve your problem? Do you have any questions? Let us know in the comments.

Woocommerce 2.3 Update: New Features and Common Issues Encountered

March 11, 2015 By John 4 Comments

It has been a month now since Woocommerce 2.3 was officially released. There has been mixed feelings about the new version. Some users find the new features awesome while others struggle to keep it together. To give you a recap, here are the new features of Woocommerce 2.3 “Handsome Hippo”.

Woocommerce 2.3 Features

User Interface and User Experience Update- Woocommerce 2.3, also known as the handsome hippo, has a flat design that goes well with many themes. The messages, notices (2 in the figure below), buttons (4), and the payment box during checkout has an updated look.

The cart template is also updated. The “Proceed to Checkout” button (5) was moved under the cart totals to enhance user experience. Another cool feature is the undo option (1) in the cart. That means that if you accidentally removed a product on your cart you can easily add it back in using the undo button. You also have the option to remove product from the cart widget (6), which I think is a really cool update on the default style template.

There are also several features that were removed due to redundancy. The option to change the colors of the buttons as well as the increment and decrement button (3) were removed. Now, if you want to add those features back, you need to install additional plugins.

Woocommerce 2.3 also introduced an opt-in usage tracking that allows the Woocommerce team to view the settings of sites. This will allow them to upgrade their system to fit the requirements of their users. You will have an option to disable tracking in the woocommerce dashboard using this path: Woocommerce/System Status/Tools. Simply click the Reset Usage Tracking Settings button.

Coupons Update- This is probably one of the major updates in Woocommerce 2.3. Coupons will no longer be applied before taxes. The “apply before tax” option has been removed in the woocommerce settings.

Aside from that, the rest of the coupons settings are left untouched. However, there are still a few issues with coupons that has not yet been sorted out on the latest version of woocommerce 2.3. We will get to that in a sec.

Emails- woocommerce 2.3 makes it easier for developers to override the CSS of emails sent through woocommerce. Additional hooks are created so that developers can easily adjust the CSS templates according to their preferences. In addition to that, emails sent will be using the woocommerce core templates but will also allow plugin templates to blend in with the shop emails.

Geolocation- Now, with “Handsome Hippo”, you can easily locate your customers by using their IPs. This can be used to calculate tax based on the users estimated location.

Issues Encountered

Woocommerce informed large theme companies about the changes before releasing Woocommerce 2.3. Prior to the official release, Woocommerce also released Woocommerce 2.3 beta so that they can work hand in hand with theme companies and plugin authors to make the release as smooth as possible. Though a lot of site owners welcome the design update on the front-end, some sites suffered from CSS and theme incompatibility and had to do a complete overhaul. Woocommerce 2.3 started using Sass, and there are inevitable plugin incompatibilities encountered by sites that use plugins using LESS.

The image below is taken from one of our sites that we manage. You will notice that the buttons, due to the flat design, need fixing. You can barely see the labels of the buttons.

To fix this issue, Woocommerce suggests installing a plugin that will allow site owners to easily change the colors of buttons and other elements on their sites. You can customize the buttons by clicking Appearance/Customize/Woocommerce.

On the same site, we also encountered problems with the application of coupon codes. Though the products added are exclusive of tax, which means that the tax calculations will not be affected, we experienced a weird issue with the application of coupons on top of a free shipping rule. The free shipping rule allows customers to get free shipping when the item bought is more than $49.

If you look at the image below, instead of displaying the free shipping note on the “Shipping and Handling”, it has been replaced by a radio. Here you will have the option to either choose free shipping or flat rate, which doesn’t make sense because customers would always want to choose the free shipping option. Aside from that, if you apply a coupon and the order total falls below $49, the flat rate automatically kicks in without the free shipping option. The store owner would not want that to happen and this issue only started after the Woocommerce 2.3 update. We will be discussing the solution to this issue on our next article.

Conclusion

Keeping your plugins up to date is very important. However, with major updates like this, it is best that you create several backups of your live site before doing anything. In some cases, it might even be necessary to copy your live site to a development site. Doing plugin updates on the development site allows you to fix errors caused by the update and at the same time reduce losses due to downtime.

The woocommerce team spend so much time and dedication for this update. Though there may be some hiccups along the way, their proactive communication with theme companies have been really helpful in ensuring that the update will not cause serious problems to their users.

If you have encountered some issues regarding the woocommerce 2.3 update or if you want to share your take on the new features of woocommerce, feel free to leave your comments below.

How to Move the Navigation Menu Outside of Header for Storefront

How to Change the Arrows in Pagination for Storefront and WooCommerce

Change the Arrows in Pagination for Storefront Theme

Change The Arrows in Pagination for WooCommerce Products

Woocommerce 2.3 Update: New Features and Common Issues Encountered

Woocommerce 2.3 Features

Issues Encountered

Conclusion

Get started today

Get 2 Hours of FREE SUPPORT

Free eBook

Quick Links

Wooassist

Connect