WooCommerce product short descriptions on a Wordpress page - wordpress

I use WooCommerce shortcode to show some products on the front page.
Like this [products limit="3" category="my-category" ids="86, 71, 54"].
The front page is a regular WordPress static page. The problem is that it doesn't show product short descriptions. If I use the code below but for is_front_page(), it shows short description of a regular WordPress post (not of the listed products).
function custom_short_description() {
if ( is_product_category() ) {
echo '<div class="custom-short-description">' . get_the_excerpt() . '</div>';
} }
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_short_description', 45 );
Adding to the function
global $post;
$product = get_product($loop->post);
and using
$product->post->post_excerpt;
didn't help.
Any ideas how to show product short descriptions?
===================
Update
===================
If you create custom loops, you might want to create variables at the beginning of the loop and then use them:
$product = wc_get_product( $loop->post->ID );
$product_short_description = $product->get_short_description();
$product_url = $product->add_to_cart_url();

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_short_description', 45 );
function custom_short_description() {
if (is_front_page()) {
global $product;
echo '<div class="custom-short-description">' . $product->get_short_description() . '</div>';
}
}
This should get you the outcome you're looking for.
Tried and tested WordPress 5.1.

Related

WooCommerce Shop page thumbnail wrap

I am looking at this: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
I would like to wrap thumb in shop page into another div.
If I use following code I could achieve something, but the problem is many themes remove or dont use woocommerce_before_shop_loop_item_title and use some different code and I cannot effectively do my action.
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'my_woocommerce_before_shop_loop_item_title', 10 );
function my_woocommerce_before_shop_loop_item_title() {
global $product;
$post_id = $product->get_id();
$html = woocommerce_get_product_thumbnail('woocommerce_thumbnail');
echo '<div class="my">' . $html . '</div>';
}
Is there action or hook that processes product thumbnail to which I could do my own action? Regardless of what is happening before and after that?
Please try to implement in this way.
//replace the functionprefix with your functions prefix
function functionprefix_wrap_loop_product_image() {
if ( ! class_exists( 'WooCommerce' ) ) return; //* exit if WooCommerce not active
add_action( 'woocommerce_before_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_open', 10 );
add_action( 'woocommerce_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_close', 10 );
}
add_action( 'woocommerce_before_shop_loop' , 'functionprefix_wrap_loop_product_image', 3 );
//replace the functionprefix with your functions prefix
function functionprefix_product_loop_image_wrapper_open() {
echo '<div class="image-wraper">';
}
function functionprefix_product_loop_image_wrapper_close() {
echo '</div>';
}

Override WooCommerce Shop Site Breadcrumb with Yoast SEO Breadcrumb

I tried to remove the WooCommerce Breadcrumbs with this code:
add_action( 'init', 'remove_wc_breadcrumbs' );
function remove_wc_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
...which works.
After that I activated the Yoast Seo Plugin Breadcrumbs an placed this code in my theme header.php
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
...which also works.
The problem appears when I navigate to my "shop-site" which I defined in the WooCommerce settings. The full breadcrumb looks like this
Home > Product
Note: The Page name in WordPress for the "shop-site" is "Test" (not "Product").
I want to override the "Product" in something different. I tried to override it by defining a custom breadcrumb title in the advanced Yoast settings on the wordpress "shop-site" page but it didn't seems to work. Overriding works if the page isn't defined as the "shop-site" in the WooCommerce settings. So I guess some function overwrites the Yoast Breadcrumb override but I can't figure out which function does this.
The same problem appears when I navigate to a single product. Breadcrumb looks like this
Home > Product > Product Name
Again I want to rename the "Product" (only the second crumb here) into something different.
Can someone solve this mysticism?
I fixed it with this code:
add_filter( 'wpseo_breadcrumb_output', 'custom_wpseo_breadcrumb_output' );
function custom_wpseo_breadcrumb_output( $output ){
if( is_product() ){
$from = 'rel="v:url" property="v:title">Product</a>';
$to = 'rel="v:url" property="v:title">New Title</a>';
$output = str_replace( $from, $to, $output );
}
elseif ( is_shop() ) {
$from = '<span class="breadcrumb_last">Products</span>';
$to = '<span class="breadcrumb_last">New Title</span>';
$output = str_replace( $from, $to, $output );
}
return $output;
}
I wonder if there wouldn't be an easier way to change the first "product" into sth like "product category"...
Have you tried in wp-admin:
Go to "Yoast"
Then "SEO settings"
Then "Breadcrumbs" and adapt taxonomies (eg: product > category).

Add a symbol before every single category inside a list display categories widget - Wordpress - WP_Widget_Categories

I want to add a symbol (the Hash symbol - #) before every category displayed inside the list display categoris widget in wordpress.
I am not adding the WP_Widget_Categories code to the post question because it is the very basic one that anyone will find with wordpress.
Anyway I am trying to make something like this:
Example
That's all. I started to study php from a few days and I don't know how to do this, any help will be really appriciated.
You can use a filter to modify the results generated by the default categories widget. Try adding this in your functions file:
function modify_widget_categories_listing( $content ) {
return "#$content";
}
add_filter( 'list_cats', 'modify_widget_categories_listing', 10, 2 );
You may have to make some changes to what is being returned to get exactly what you're looking for, but that's the gist of it.
Put this in your functions.php
function show_categories_with_hash() {
$terms = get_terms( 'categories' );
echo '<ul>';
foreach ( $terms as $term ) {
$term_link = get_term_link( $term );
if ( is_wp_error( $term_link ) ) {
continue;
}
echo '<li>#' . $term->name . '</li>';
}
echo '</ul>';
}

Open WooCommerce External Products in New Tab

I'm trying to customize WooCommerce external product links to open in new tabs...
This is my try:
added a filter to the WordPress theme functions.php file as the following:
add_filter( 'woocommerce_product_add_to_cart_url', 'woocommerce_externalProducts_openInNewTab' );
function woocommerce_externalProducts_openInNewTab($product_url) {
global $product;
if ( $product->is_type('external') ) {
$product_url = $product->get_product_url() . '"target="_blank""';
}
return $product_url;
}
What did I missed?
what you're currently doing is wrong... get_product_url is named as what it do. It will give you the url... not the html anchor that has the url, but just the url.. so you're just adding some text to the url.. that's what you are doing...
One solution is given by #Ash Patel. You can change the markup by using templates... just navigate to your plugin folder and look for this file.. woocommerce\templates\single-product\add-to-cart\external.php. You can find instructions inside it.
Now, sometimes, we don't like editing templates... especially if it's just minor edits like this...
Below code will do it the way you want it... just paste this code in your theme's functions.php.
remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'rei_external_add_to_cart', 30 );
function rei_external_add_to_cart(){
global $product;
if ( ! $product->add_to_cart_url() ) {
return;
}
$product_url = $product->add_to_cart_url();
$button_text = $product->single_add_to_cart_text();
do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<p class="cart">
<?php echo esc_html( $button_text ); ?>
</p>
<?php do_action( 'woocommerce_after_add_to_cart_button' );
}
Here is how you add target="_blank" to the links on archive pages:
function ns_open_in_new_tab($args, $product)
{
if( $product->is_type('external') ) {
// Inject target="_blank" into the attributes array
$args['attributes']['target'] = '_blank';
}
return $args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'ns_open_in_new_tab', 10, 2 );
Replace ns_ part with your own namespace abbreviation.
Remove above funtion from function.php:
Use plugin files from Template folder by Template Overwrite method and then
follow below path:
woocommerce\templates\single-product\add-to-cart\external.php
open external.php where there is a tag, apply target="_blank".
it will work.

add Custom text field in single product page

I am working on a project in woocommerce.
Can anyone help me to add a custom text field next to "add to cart"?
I tried the following but it is not working.
add_action( 'woocommerce_after_single_product_summary', 'add_custom_field', 0 );
function add_custom_field() {
global $post;
echo "<div class='prod-code'>Product Code: ";
$text= get_field('txt-field', $post);
echo "</div>";
return true;
}
Perhaps try using $post->ID like this:
add_action( 'woocommerce_after_single_product_summary', 'add_custom_field', 0 );
function add_custom_field() {
global $post;
echo "<div class='prod-code'>Product Code: ";
$text= get_field('txt-field', $post->ID);
echo "</div>";
return true;
}
put your html code inside content-product.php (wp-content/themes/YOUR THEME/woocommerce/content-product.php)
content-product.php contains code of list page in wordpress. if you want to edit product page than edit content-single-product.php.
You are using Woocommerce there are two case :
You are reading post ID
You want to display a SKU
You can implement it via single function :
add_action( 'woocommerce_single_product_summary', 'display_productCode', 5 );
function display_productCode(){
global $product;
echo 'SKU: ' . $product->get_sku();
echo 'Product ID:'.$product->get_id();
}

Resources