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/
Related
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.
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);
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)
I need to know how to show results in another page in PHP. After much research in the files drupal site. The existence of a file "search-result.tpl.php"
So, how to show this in another page php?
search-result.tpl.php
<?php
/**
* #file
* Default theme implementation for displaying a single search result.
*
* This template renders a single search result and is collected into
* search-results.tpl.php. This and the parent template are
* dependent to one another sharing the markup for definition lists.
*
* Available variables:
* - $url: URL of the result.
* - $title: Title of the result.
* - $snippet: A small preview of the result. Does not apply to user searches.
* - $info: String of all the meta information ready for print. Does not apply
* to user searches.
* - $info_split: Contains same data as $info, split into a keyed array.
* - $module: The machine-readable name of the module (tab) being searched, such
* as "node" or "user".
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
*
* Default keys within $info_split:
* - $info_split['type']: Node type (or item type string supplied by module).
* - $info_split['user']: Author of the node linked to users profile. Depends
* on permission.
* - $info_split['date']: Last update of the node. Short formatted.
* - $info_split['comment']: Number of comments output as "% comments", %
* being the count. Depends on comment.module.
*
* Other variables:
* - $classes_array: Array of HTML class attribute values. It is flattened
* into a string within the variable $classes.
* - $title_attributes_array: Array of HTML attributes for the title. It is
* flattened into a string within the variable $title_attributes.
* - $content_attributes_array: Array of HTML attributes for the content. It is
* flattened into a string within the variable $content_attributes.
*
* Since $info_split is keyed, a direct print of the item is possible.
* This array does not apply to user searches so it is recommended to check
* for its existence before printing. The default keys of 'type', 'user' and
* 'date' always exist for node searches. Modules may provide other data.
* #code
* <?php if (isset($info_split['comment'])): ?>
* <span class="info-comment">
* <?php print $info_split['comment']; ?>
* </span>
* <?php endif; ?>
* #endcode
*
* To check for all available data within $info_split, use the code below.
* #code
* <?php print '<pre>'. check_plain(print_r($info_split, 1)) .'</pre>'; ?>
* #endcode
*
* #see template_preprocess()
* #see template_preprocess_search_result()
* #see template_process()
*/
?>
<li class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print render($title_prefix); ?>
<h3 class="title"<?php print $title_attributes; ?>>
<?php print $title; ?>
</h3>
<?php print render($title_suffix); ?>
<div class="search-snippet-info">
<?php if ($snippet): ?>
<p class="search-snippet"<?php print $content_attributes; ?>><?php print $snippet; ?></p>
<?php endif; ?>
<?php if ($info): ?>
<p class="search-info"><?php print $info; ?></p>
<?php endif; ?>
</div>
</li>
What I believev you probably want to do is copy the search-result.tpl.php file to your themes directory and then modify it directly.
I do know that Drupal looks in your theme directory for template files first, which allows you to "override" core functionality without corrupting the system.
If you manage to fatally break the search-result.tpl.php file, you can just delete or rename it and get the original functionality back.