I am trying to change the location of Price of all sample Products from the current location, which is below the title to just about "add to cart".
If i do it with CSS, that is affecting the responsiveness of the website.
i want to make this change on a PHP, so that it can impact all the SAMPLE products which i upload now on..
can i make any changes on the PHP so that the "SAMPLE Product" Price always shows up just above "add to cart" ?
at present:
what i need is:
the code in content-single-product.php
<div class="single clearfix row-fluid">
<div class="wrap span6 product-left">
<?php
/**
* woocommerce_show_product_images hook
*
* #hooked woocommerce_show_product_sale_flash - 10
* #hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
</div>
<div class="span6">
<div class="product-detail">
<?php
/**
* woocommerce_single_product_summary hook
*
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_price - 10
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
//echo do_shortcode("[yith_wcwl_add_to_wishlist]");
?>
</div>
</div>
</div>
In the below code, you are overwriting the WooCommerce hook inclusion/priority order. So the price will be included after woocommerce_template_single_excerpt which has a priority value of 20
Include the following code in functions.php.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
WooCommerce displays the price between the product title and product description on the single product page by default.
If you’d like to move the price after the content, you can do so easily by adding the following hook to your theme’s functions.php file:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
By changing the number from 10 to 25, you move the price below the single excerpt (which has a priority of 20).
The WooCommerce templates/content-single-product.php file shows the hook priorities for the single product loop.
Here you can get WooCommerce Action and Filter Hook
-https://docs.woothemes.com/wc-apidocs/hook-docs.html
Related
I use a child theme of Storefront. I have edited a copy of the header.php file and I add in this part after removing the navigation bar the extra div:
<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
<div class="col-full">
<?php
/**
* Functions hooked into storefront_header action
*
* #hooked storefront_skip_links - 0
* #hooked storefront_social_icons - 10
* #hooked storefront_site_branding - 20
* #hooked storefront_secondary_navigation - 30
* #hooked storefront_product_search - 40
* #hooked storefront_primary_navigation_wrapper - 42
* #hooked storefront_primary_navigation - 50
* #hooked storefront_header_cart - 60
* #hooked storefront_primary_navigation_wrapper_close - 68
*/
**remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );**
**add_action('storefront_header', 'storefront_primary_navigation', 51);**
**add_action('storefront_header', 'jk_storefront_header_content', 50);**
do_action( 'storefront_header' );
?>
</div>
</header><!-- #masthead -->
This seems correct but instead of the navigation bar to be removed and replaced I have the old navigation bar the extra div and another navigation, which means that navigation bar had never been removed…
How this can be fixed?
You don't need to override header.php in your child theme…
To use properly remove_action(), you need to embed it in a custom function hooked in init action hook this way:
add_action('init', 'replace_storefront_primary_navigation' );
function replace_storefront_primary_navigation(){
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
add_action('storefront_header', 'jk_storefront_header_content', 50);
}
function jk_storefront_header_content(){
// your custom navigation code goes here
echo '<span style="display:inline-block; padding:10px; border:solid 1px grey;">My custom mega menu goes Here</span>';
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works on WooCommerce Storefront theme.
The link I am trying to relocate is the link that wraps each product on the shop page which takes you to that products own page. As it is right now it wraps the image, product name, product sku and price. I only want it to wrap the image and product name.
Here's the code which is creating each product.
<li <?php post_class( $boot_classes ); ?>>
<?php
/**
* woocommerce_before_shop_loop_item hook.
*
* #hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( 'woocommerce_before_shop_loop_item' );
/**
* woocommerce_before_shop_loop_item_title hook.
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
/**
* woocommerce_shop_loop_item_title hook.
*
* #hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
/**
* woocommerce_after_shop_loop_item_title hook.
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
/**
* woocommerce_after_shop_loop_item hook.
*
* #hooked woocommerce_template_loop_product_link_close - 5
* #hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item' );
?>
</li>
How is this possible?
You can change the location of the product link close as you expect, this way:
add_action('init', 'change_location_of_loop_product_link_close' );
function change_location_of_loop_product_link_close(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action('woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 20 );
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works.
NEWS:
After the answer above, I could change a little more, but I still couldn't change all I need. The big question now is:
How can I remove contents of a action (#hooked) and put it in a new hook. Can I do that? For example:
woocommerce_single_product_summary brings
* woocommerce_single_product_summary hook.
*
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_rating - 10
* #hooked woocommerce_template_single_price - 10
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
* #hooked WC_Structured_Data::generate_product_data() - 60
I'd like to remove (I know I have to use remove(action) to make it. And put this contents in a new hook:
woocommerce_single_product_summary brings with
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_rating - 10
* #hooked woocommerce_template_single_price - 10
And a new hook "woocommerce_single_product_NEW with
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
How can I do it?
My page now looks like this:
Thanks!
I'm a jr guy learning PHP to make my own Wordpress theme. Today, it's not a big deal, but I have a new project and I've trying to use woocommerce plugin.
My header, sidebar and my footer are working just fine, but I couldn't undestand exacly how to add my own theme to design the single product page and the others woocommerce pages because I didn't know how hooks and that functions bring the content.
My goals:
1) Change all itens of my single page products from this:
MY CODE:
<?php
/**
* woocommerce_before_main_content hook.
*
* #hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* #hooked woocommerce_breadcrumb - 20
* #hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<!-- CLOSE - Shows the path of my site Inicio / Shop -->
<!-- PAge Title -->
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title">
<?php woocommerce_page_title(); ?>
</h1>
<?php endif; ?>
<!-- Close PAge Title -->
<!-- Não mostra nada nesse momento -->
<?php
/**
* woocommerce_archive_description hook.
*
* #hooked woocommerce_taxonomy_archive_description - 10
* #hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
<!-- Fecha - Não mostra nada nesse momento -->
</header>
<?php if ( have_posts() ) : ?>
<?php
/**
* woocommerce_before_shop_loop hook.
*
* #hooked wc_print_notices - 10
* #hooked woocommerce_result_count - 20
* #hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
?>
<?php woocommerce_product_loop_start(); ?>
<?php woocommerce_product_subcategories(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* woocommerce_shop_loop hook.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php woocommerce_product_loop_end(); ?>
<?php
/**
* woocommerce_after_shop_loop hook.
*
* #hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
?>
<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>
<?php
/**
* woocommerce_no_products_found hook.
*
* #hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
?>
<?php endif; ?>
<?php
/**
* woocommerce_after_main_content hook.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
<?php get_footer( 'shop' ); ?>
To something like that:
I already known wich part brings the content, but I'd like to understand how to change each peace of it.
If someone can help me or just link here some documentation, I would apreciate that so much.
Tks!
if you want to modify woocommerce into your theme just follow instructions.
first of all add woocommerce support into your theme.
add_theme_support( 'woocommerce' );
The WooCommerce plugin comes with a number of front-end HTML templates as well as email templates. Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:
In your theme directory, make a new folder called “woocommerce.”
Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. Fortunately, the template file structure and naming in WooCommerce is easy to follow.
In your newly created "woocommerce" folder, copy the template file that you want to edit. Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.
Edit the file from within your “woocommerce” folder and save the changes.
Then Let's say that we want to change some of the HTML within the “My Orders” screen of WooCommerce.
The first thing we need to do is locate the correct template. In this case, the “My Orders” section is under “My Account” in WooCommerce. The directory structure looks like the following:
/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php
Next, make a folder within your theme called “woocommerce” and within that folder make a second folder called “myaccount.” After that, copy the my-orders.php file into that directory.
You should be left with the following:
/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php
Any changes made to this file will now override the original.
help links:
https://code.tutsplus.com/articles/an-introduction-to-theming-woocommerce-for-wordpress--wp-31577
https://slicejack.com/creating-custom-woocommerce-themes/
In WooCommerce, I would like to display product varation price under image. I am using some code in my functions.php but not working please any help will be appreciated. Thanks
add_action( 'woocommerce_product_thumbnails','woocommerce_single_variation',30 );
For that you need to:
Remove the woocommerce_template_single_price in woocommerce_single_product_summary hook:
/**
* woocommerce_single_product_summary hook.
*
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_rating - 10
* #hooked woocommerce_template_single_price - 10
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
*/
To add it in woocommerce_before_single_product_summary hook:
/**
* woocommerce_before_single_product_summary hook.
*
* #hooked woocommerce_show_product_sale_flash - 10
* #hooked woocommerce_show_product_images - 20
*/
So your code will be:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_product_thumbnails','woocommerce_template_single_price', 30 );
This code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works.
I'm making a woocommerce theme and I'm having trouble reordering the single page hooks. I want the product short description to appear under the product title.
I've been able to move the short description under the title using the remove / add action, I added this to the function.php file
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 7 );
Here's what my content-single-product file looks like
<div class="summary entry-summary">
<?php
/**
* woocommerce_single_product_summary hook
*
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_excerpt - 7
* #hooked woocommerce_template_single_rating - 20
* #hooked woocommerce_template_single_price - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
?>
The problem is now the description is showing up twice, once in the new position (under the title) and another time it's original position (under the price)
Any help would be greatly appreciated! Thanks.
Ok I've been able to change the hook position in the wp-template-hooks.php file directly.
* Product Summary Box
*
* #see woocommerce_template_single_title()
* #see woocommerce_template_single_price()
* #see woocommerce_template_single_excerpt()
* #see woocommerce_template_single_meta()
* #see woocommerce_template_single_sharing()
*/
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 7 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
My question now is why can't I change these by Removing/Adding actions to the functions.php file?
add this function to your theme functions.php
add_action( 'init', 'remove_content' );
function remove_content() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 7 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );}
In case you like add some elements again, use add_action and change priorities if needed.