This question already has an answer here:
WooCommerce action hooks and overriding templates
(1 answer)
Closed 2 years ago.
I would like to edit the template of my Single product page.
I tried to use the WC hook woocommerce_single_product_summary in my child's functions.php to add custom field right below the title, but unfortunately the hooks behave strange, as described below.
I tried to add this line of code:
add_action('woocommerce_single_product_summary', 'display_speaker_name', 6);
function display_speaker_name() {
echo '<p>' . get_field('speaker_name') . '</p>';
}
But what it does is, that it displays the custom field on the top of the summary section above the title. When i try to change the priority to 11, it displays at the bottom of the section, below the categories. I looked into the WC documentation and the priority of woocommerce_template_single_title hook should be 5. So if I understand that correctly, the proper priority for my custom hook should be between 6-9, if I want to display it below the title, right?
I even looked to the wc_template_hooks.php and the priority of the default WC hooks is set properly there. Also I tried to remove the original WC title hook and then add it with the priority 5, but unfortunately it did not work as well.
Do you have any ideas, how to solve this problem? I am using OceanWP theme. Thank you!
EDIT: See comments on the first answer for the solution.
From /templates/content-single-product.php
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* #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
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
So to go after the whole thing, you have to use a priority higher than 60.
add_action('woocommerce_single_product_summary', 'display_speaker_name', 70);
Related
I am wanting to add an image after the Product Short Description and before the Price, globally on the single product page. How can I do this?
The elements of the product summary on the single product page are displayed via the woocommerce_single_product_summary hook in the content-single-product.php file. In this template file you can see a list of all the functions that are being called via this hook and their priority.
/**
* Hook: woocommerce_single_product_summary.
*
* #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
*/
So if you want to add content after the short description (single excerpt) you will have to use the woocommerce_single_product_summary hook and make sure the priority is higher than the single excerpt (20) but lower than the following element, which is the 'add to cart' (30).
So something like this:
add_action( 'woocommerce_single_product_summary', function() {
echo '<img src="https://www.fillmurray.com/300/200">';
}, 25 );
If you are completely new to WordPress hooks you can check the documentation here: https://developer.wordpress.org/plugins/hooks/
On my Wordpress homepage, the post is showing only one line of description. How do I add new lines?
I want to show more lines. So how can I do it?
Add below shared code in your theme function.php file:-
/**
* Filter the except length to 100 words.
*
* #param int $length Excerpt length.
* #return int (Maybe) modified excerpt length.
*/
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );
function wpdocs_custom_excerpt_length( $length ) {
return 100;
}
EDIT I: I have found the file where the old plugin Woocommerce Blocks sets the blocks: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php But where is it in the Woocommerce library?
EDIT II: Question in short:
How do you customize the Woocommerce Blocks to show more data than the build in functionality?
------------- background ------------
If you search for adding custom attributes for Woocommerce Blocks you find a lot of WordPress examples for this.
For example, this, where the answer points out, that you can add attributes by using the blocks.registerBlockType. But how to do this for Woocommerce Blocks?
I want to be able to add a data field to the HTML output. The data field should then call a product attribute and show if it exists.
So when you use the Woocommerce Blocks on your front page - for example, the size will be shown underneath the add to cart button - as in the image.
As you might know the functionality of showing/hiding the price, add-to-cart-button, reviews are already there, when you choose a Woocommerce Block on the editing site.
But I haven't found the place where this functionality is created.
This would also be a great help actually - if you could show me where in the Woocommerce Github library the blocks are being created. Maybe I can figure out my self how to filter through them and add the functionality
I know - based on a Udemy course - how to create a custom plugin and create a new blog-type, save and edit.
But I need to figure out what Woocommerce namespace is, how they create their blocks, and what their data is called. The Woocommerce developer handbook is not saying anything about this - not what I've found.
I've been searching the internet for three days now, and I just don't understand that I can't seem to find ANYTHING on this. That nobody else wants to customize this functionality in Woocommerce. I know it is a new function (blocks) in the core, but still.
I just need to be pointed in the right direction.
I was dealing with the exact same problem as you and I found the answer by digging deeply on the WC blocks plugin repo.
I found that you have to apply a filter to this hook: woocommerce_blocks_product_grid_item_html
The original HTML is this:
<li class="wc-block-grid__product">
<a href="{$data->permalink}" class="wc-block-grid__product-link">
{$data->image}
{$data->title}
</a>
{$data->badge}
{$data->price}
{$data->rating}
{$data->button}
</li>
So that way you can filter the html code and modify it by adding this chunk of code to your functions.php and customizing it to fit your needs
function wc_add_date_to_gutenberg_block( $html, $data, $product ) {
$dateStr = get_post_meta($product->get_id(), 'ticket_start_time', true);
$date = new DateTime($dateStr);
$data->date = "<p>Date: " . $date->format('d-m-Y H:i') . "</p>";
$output = "
<li class=\"wc-block-grid__product\">
<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
{$data->image}
{$data->title}
</a>
{$data->date} <- I added this one
{$data->badge}
{$data->price}
{$data->rating}
{$data->button}
</li>
";
return $output;
}
add_filter("woocommerce_blocks_product_grid_item_html", "wc_add_date_to_gutenberg_block", 10, 3);
I'm not totally clear on what you're asking. You reference Gutenberg Blocks often, but have linked to a WooCommerce repository that doesn't have any Gutenberg Blocks.
But if I'm understanding you correctly, you're looking for the PHP template that controls products. You can find in content-product.php
You'll see a lot of calls to do_action which is core to WordPress hooks as used in plugin development.
<li <?php wc_product_class( '', $product ); ?>>
<?php
/**
* Hook: woocommerce_before_shop_loop_item.
*
* #hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( 'woocommerce_before_shop_loop_item' );
/**
* Hook: woocommerce_before_shop_loop_item_title.
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
/**
* Hook: woocommerce_shop_loop_item_title.
*
* #hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
/**
* Hook: woocommerce_after_shop_loop_item_title.
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
/**
* Hook: woocommerce_after_shop_loop_item.
*
* #hooked woocommerce_template_loop_product_link_close - 5
* #hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item' );
?>
</li>
If you do a search for the action hooks defined in content-product.php, you'll find them defined in wc-template-hooks.php. Hooks are named actions that functions are added to. For example if you look into the woocommerce_after_shop_loop_item action, you'll find these two functions being attached to it.
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
The woocommerce_template_loop_product_link_close and woocommerce_template_loop_add_to_cart functions are defined in wc-template-functions.php
You could create an entirely new content-product.php file in your theme by creating a file in yourtheme/woocommerce/content-product.php, however you then lose a lot of the built in power and compatibility of WooCommerce.
Better would be to remove then add new actions to the woocommerce_after_shop_loop_item hook. For example, woocommerce_template_loop_product_link_close is currently defined as:
function woocommerce_template_loop_product_link_close() {
echo '</a>';
}
You could overwrite this by doing this in your functions.php file:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
function custom_template_loop_product_link_close() {
echo 'Hello world!</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_template_loop_product_link_close', 5 );
I hope this helps.
I am working with the Roots WP theme. In any case I have installed Woo Commerce as well and I am trying to get it configured to NOT show any sidebar on all Woo Commerce pages.
I have gone through this entire tutorial twice: http://roots.io/using-woocommerce-with-roots/
It does not address how to remove the sidebar for Roots/WooCommerce, just how to remove the duplicate headers, footers and sidebars. Check! I have that accomplished; now I just want to remove the sidebar all together.
I have added the archive-product.php, single-product.php pages into the Roots theme and inserted this line of code:
<?php woocommerce_content(); ?>
I have edited the lib/config.php file to not show a side bar on certain themes.
array(
'template-custom.php',
'template-page.php',
'template-shop.php',
'archive-product.php',
'single-product.php'
)
No avail!
I have done everything that I can possibly think of to remove the side bar. Anyone have any suggestions?
Thanks!
You can add any of the WooCommerce conditionals to the first array in the sidebar config of /lib/config.php.
I would start by adding is_woocommerce to remove the sidebar from all WooCommerce pages.
Example:
function roots_display_sidebar() {
$sidebar_config = new Roots_Sidebar(
/**
* Conditional tag checks (http://codex.wordpress.org/Conditional_Tags)
* Any of these conditional tags that return true won't show the sidebar
*
* To use a function that accepts arguments, use the following format:
*
* array('function_name', array('arg1', 'arg2'))
*
* The second element must be an array even if there's only 1 argument.
*/
array(
'is_404',
'is_front_page',
'is_woocommerce' // New Conditional for WooCommerce Pages
),
/**
* Page template checks (via is_page_template())
* Any of these page templates that return true won't show the sidebar
*/
array(
'template-custom.php'
)
);
I'm working on a Woocommerce-based site and now I'm on the single page. My doubt is how to reorder some hooks there. Originally, we have this order (priority):
<?php
/*
* #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
*/
?>
According to my layout, I need to put the elements on this exactly order:
1: Title
2: Name of the product category (last level category where that product was classified in the admin)
3: Quantity switch and "add to cart" button
4 and last: Description
How can I redefine this on my "functions" file in my theme? Any ideas?
This was so long ago but in case anyone is interested, in functions.php file remove and add your own action to reorder contents of single product summary:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 5 );
To insert description into Summary:
-> replace XX with the proper priority number
add_action('woocommerce_single_product_summary','woocommerce_product_description_tab', XX ,1)