Building custom woocommerce template on top of storefront.
I want to replace/change some html for the individual item titles within the loop functionality for the category pages. The "add to cart" link, price, etc. are all located in woocommerce/templates/loop directory. None of the files in that directory appear contain the html for the product title for this functionality.
Where do I find this thing? I swear the most annoying thing about building on woocommerce is trying to find where all the pieces live...
woocommerce/includes/wc-template-functions.php
woocommerce_template_loop_product_title function
function woocommerce_template_loop_product_title() {
echo '<h3 class="woocommerce-loop-product__title">' . get_the_title() . '</h3>';
}
You need change the information in the file functions.php, preferably in the theme child file.
What you put there will normally be rewritten because it have priority.
Like Randy wrote it, this is a pluggable function you will find in
wp-content\plugins\woocommerce\includes\wc-template-functions.php
if ( ! function_exists( 'woocommerce_template_loop_product_title' ) ) {
/**
* Show the product title in the product loop. By default this is an H2.
*/
function woocommerce_template_loop_product_title() {
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h2>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
}
To override it, just copy paste the code without the condition in the functions.php file of your child theme and modify it according to your needs.
Ex: Change h2 for h3
function woocommerce_template_loop_product_title() {
echo '<h3 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h3>';
}
Related
I have used following shortcodes in the Home page to display set of products :-
[products limit="15" orderby="menu_order" columns="5" category="shirt, shoe"]
However when any product image is clicked on the Home page, the specific link is opened on the same tab. I would like to open that link in a separate tab. How to achieve this?
Thanks!
Note: I am using Oceanwp as my active theme
Funny, i just had the same issue few days ago. Here's how i've solved it:
if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
/**
* Insert the opening anchor tag for products in the loop.
*/
function woocommerce_template_loop_product_link_open() {
global $product;
$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
echo '<a href="' . esc_url($link) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link" target="_blank">';
}
}
Tested and works. You can just paste this into your functions.php or if you've made a custom plugin just include this at the very beginning.
You might need to add "is_home()" or "is_front_page()" to make it hit just the home page and not the whole site
Since I am using Oceanwp theme, I have to modify in different places than what is suggested by #Diego. But his answer gives me the clue for finding the solution.
This is the modification I did to make it work for Oceanwp.
if ( ! function_exists( 'ocean_woo_img_link_open' ) ) {
function ocean_woo_img_link_open() {
global $product;
$woo_img_link = get_the_permalink( $product->get_id() );
echo '<a href="' . esc_url( $woo_img_link ) . '" class="woocommerce-LoopProduct-link" target="_blank" >';
}
}
Is it possible to manipulate the output of the image captions within the_content in such a way that not only the caption, but also the image title and/or description (defined in the media library) are output under each image?
Possibly via the functions.php?
Yes it is possible to manipulate the on the_content.
The easiest way which it looks like you are wanting to do is add a filter in your functions.php file.
I just pulled this from the Codex and modified a bit so you can get the gist of what I'm talking about.
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
function my_img_caption_shortcode( $output, $attr, $content ) {
$attr = shortcode_atts( array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
return '';
}
if ( $attr['id'] ) {
$attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
}
return '<div ' . $attr['id']
. 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
. 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
. do_shortcode( $content )
. '<p class="wp-caption-text">' . $attr['caption'] . '</p>'
. '</div>';
}
What you can then do is if you see the $attr['caption'], you can modify how you would like it to be. So you can do: get_the_title($attr['id']) to add the title or get_post_meta($attr['id'], '_wp_attachment_image_alt', TRUE); to get the image alt.
To make things easier if you want to grab all the details on a specific attachment you can use a function like this and then get whatever you want.
Here's an example of adding the title to your caption. The format is "Title - Caption"
. '<p class="wp-caption-text">' . get_the_title($attr['id']) . " - " . $attr['caption'] . '</p>'
Link to Code reference: https://developer.wordpress.org/reference/hooks/img_caption_shortcode/
Maybe i'm not understanding your question but it seems to me that you're using the Gutenberg editor?
... All the features you're looking for are already built-in.
If you want to set the alt="" or title="" attributes you can do it on the right side action column, by clicking on the image itself, while in the Gutenberg editor.
For the figcaption, you can set it right under the image, by clicking on the image itself, while in the Gutenberg editor.
I'd like to add a button next to "Add to Cart" on the product page that adds "-sample" to the product URL when clicked.
Example:
You're viewing Product 1's page and the URL is "http://www.example.com/shop/product-1/"
When you click on the button, it adds "-sample" to the URL
"http://www.example.com/shop/product-1-sample/"
How can I achieve this?
Thanks
For woocommerce 3+ (only):
In woocommerce 3 you will use woocommerce_after_shop_loop_item action hook instead, as the hook woocommerce_after_add_to_cart_button will not work anymore.
add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_button', 10, 0 );
function add_custom_button() {
global $product;
$product_link = $product->get_permalink();
$sample_link = substr($product_link, 0, -1) . '-sample/';
echo '<a class="button alt btn-sample" href="' . esc_url( $sample_link ) .'">' . __( "Get a sample", "my_theme_slug" ) . '</a>';
}
Code goes on function.php file of your active child theme (or active theme). Tested and works.
Before woocommerce 3:
This is possible using hook woocommerce_after_add_to_cart_button to add your additional button on product pages, using this custom function:
add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_button', 10, 0 );
function add_custom_button() {
global $product;
$product_link = get_permalink( get_the_id() );
$sample_link = substr($product_link, 0, -1) . '-sample/';
echo '<a class="button alt btn-sample" href="' . esc_url( $sample_link ) .'">' . __( "Get a sample", "my_theme_slug" ) . '</a>';
}
This code goes on function.php file of your active child theme or theme.
This code is tested and fully functional.
Based on this: Add a button after add to cart and redirect it to some custom link in WooCommerce
And this: PHP - How to remove all specific characters at the end of a string?
It's been a long time since the original question, but here's a recent update that works for me, WooCommerce 6.3.1:
/* WooCommerce customization */
add_action( 'woocommerce_after_shop_loop_item', 'custom_select_link', 11 );
function custom_select_link() {
global $product;
// Custom "Select" button.
echo '<a class="custom-button" href="' . esc_url( get_permalink( $product->id ) ) . '"><button class="custom-button"> </button></a>';
}
This answer cites an answer in wordpress.stackexchange.
I am learning more and more php as i go along. I sorta get the gist of how php hooks work (actions, filters)
I was attempting to add a filter to my child functions page:
add_filter('woocommerce_booking_single_check_availability_text', 'wc_change_button_text');
function wc_change_button_text() {
return __( 'Add to cart', 'woocommerce' );
}
You could use WooCommerce filter hooks to change these, but I wouldn't recommend it because it'll take too long and create code bloat.
Here's what I would recommend: https://wordpress.org/plugins/woocommerce-multilingual/
I'm sure you may have already found a solution, but for anyone else that stumbles across this post, simply add this snippet to your child theme's functions file.
add_filter( 'woocommerce_loop_add_to_cart_link',
'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product ) {
$button_text = __("Change Text Here", "woocommerce");
$button = '<a class="book-now button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
return $button;
}
Tested and works 5.4.1
I want wordpress post rss list featured image link
Ex:
<title>Test title</title>
<desc>Test desc</desc>
<image>imagelink</image>
I'm not using plugin.
Thanks
This will do. Add it to functions.php file:
// add the namespace to the RSS opening element
add_action( 'rss2_ns', 'custom_prefix_add_media_namespace' );
function custom_prefix_add_media_namespace() {
echo "xmlns:media="http://search.yahoo.com/mrss/"n";
}
// add the requisite tag where a thumbnail exists
add_action( 'rss2_item', 'custom_prefix_add_media_thumbnail' );
function custom_prefix_add_media_thumbnail() {
global $post;
if( has_post_thumbnail( $post->ID )) {
$thumb_ID = get_post_thumbnail_id( $post->ID );
$details = wp_get_attachment_image_src($thumb_ID, 'thumbnail');
if( is_array($details) ) {
echo '<media:thumbnail url="' . $details[0] . '" width="' . $details[1] . '" height="' . $details[2] . '" />';
}
}
}
Also when you add this, be sure to reset the permalinks (flush them), by going to Settings > Permalinks, and either change permalinks to default, and back to your defined settings, or just re-saving.
After that, check your feed and the media should be there.