How can I add the entry I put as a rating in ACF for a woocommerce product to output under the title (ideally in a nice green rounded block with white text).
Im new to coding so have so only got this far with some code that outputs custom text...
I used the following code snippet in my functions.php
remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
function customize_shop_page_product_title() {
$custom_rating = ' Rating From ACF Entry Here';
echo '<h3 class="woocommerce-loop-product__title">' . get_the_title() .$custom_rating.'</h3>';
}
Related
I'm using OceanWp and WooCommerce.
I've used Kia subtitle plugin to show subtitle of the product in Archive page and it worked. I'm trying right now to show the subtitle also in single product page under the product title.
I've used this hook but it didn't work
function kia_add_subtitle_to_single_product(){
if( function_exists( 'the_subtitle' ) ) the_subtitle( '<h4 class="subtitle">', '</h4>' );
}
add_action( 'ocean_after_single_product_title', 'kia_add_subtitle_to_single_product', 20 );
Any suggestion? Thank you!
How do I set an image that was uploaded via Advanced Custom Fields as the featured image of that woocommerce product only on the single product page?
This is how I set it up:
Step 1: I created an ACF image field with return format of 'Image Array'. Here's a screenshot of the settings.
ACF Image field settings
Step 2: I created conditional rules to only display the ACF input field on products for a specific category. That works. In the screen shot below you can see the field on the product page with an image uploaded to it.
ACF Image field on product page with uploaded image from media library
Step 3: Now this is the part I'm struggling with. I need to replace the woocommerce featured image with the uploaded ACF image when a user views the product page.
The screenshot below shows the product page with the woocommerce featured image but I want to replace that with the ACF image I uploaded in Step 2.
Product page on Front-end shows Woo featured image but I want to replace it with ACF image uploaded in Step 2
So I have the snippets plugin enabled where I can add code to swap the product images on the front-end (product page) but I need help with code please.
Any help will be appreciated, thanks!
I'm using OceanWP with WooCommerce.
In your ACF field set image to return ID or modify the function bellow if you need array or url value.
Add the following function to your active theme functions.php file.
function test($html, $post_thumbnail_id ) {
global $product;
$categories = $product->get_category_ids();
//Change 19 to the category id you need
if (in_array('19', $categories)):
//Change get_field to your field
$post_thumbnail_id = get_field('custom_thumb');
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'test',10,2);
The answer from Martin worked great. Here's the final code if anyone needs it. It's modified to fallback onto the default woocommerce featured image if the ACF image field is empty.
function acf_wall_art_feature_image($html, $post_thumbnail_id ) {
global $product;
$categories = $product->get_category_ids();
//Get the category id from admin/products/categories/(category_name) URL
if (in_array('30', $categories)):
//Get_field for ACF field name
$post_thumbnail_id = get_field('wall_art_featured_product_image');
//Fallback to woo featured image if no ACF image is set
if (!$post_thumbnail_id):
return $html;
else:
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
endif;
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html',
'acf_wall_art_feature_image',10,2);
On my woocommerce site I want to add the text "Only available in stores" to all my product's short description, and also have that same text be default for all future products I add.
I had a search but the solutions seemed way to complex for me. Is there some code I can paste in the functions.php?
Thanks!
You can solve this problem easily. You need to some code push to theme functions.php or use code snippets plugin. This code only works when the WooCommerce product short description is empty.
function wp_woocommerce_short_description_if_empty(){
global $post;
if (empty($post->post_excerpt)) {
$post_excerpt = '<p class="default-short-desc">';
$post_excerpt .= 'Your Custom Message Here.';
$post_excerpt .= '</p>';
echo $post_excerpt;
}
}
add_action('woocommerce_single_product_summary', 'wp_woocommerce_short_description_if_empty', 21);
You can also try this for your default product description, you can Add Custom Text before/after the Product Short Description
add_filter( 'woocommerce_short_description', 'woo_add_text_after_excerpt_single_product', 20, 1 );
function woo_add_text_after_excerpt_single_product( $post_excerpt ){
/* Method 1: Add Custom Text before the Product Short Description on product page */
/* $content= '<ul class="fancy-bullet-points red">
<li>'.__('Only available in stores').'</li>
</ul>';
return $content.'<br>'.$post_excerpt;
*/
/* Method 2: Add Custom Text after the Product Short Description on product page */
$post_excerpt .= '<ul class="fancy-bullet-points red">
<li>'.__('Only available in stores').'</li>
</ul>';
return $post_excerpt;
}
Note: Add Custom Text before the Product Short Description on the product page - code is commented so you can uncomment accordingly.
I want to add additional button in woocommerce single product. In which file I need to make changes?
Example on screen:
enter image description here
Try this code,
function wc_shop_demo_button() {
echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field( "url_demo" ).'" target="_blank">Show Details</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20 );
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20 );
Hope this will helps you. For more details visit,
how to add button after woocommerce shop loop item
First of all, create a Custom Field using Advanced Custom Fields plugin for Woocommerce Product Page.
For creating a custom field using the ACF plugin, refer to the below article.
https://wpmayor.com/woocommerce-custom-fields-how-to-create-and-display-them/
To display the Custom Button in the frontend of the website, add the below code in functions.php file.
function rf_custom_product_button() {
echo '<a class="button custom_button" href="'.get_field( "custom_button" ).'" target="_blank">Click Here</a>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'rf_custom_product_button', 20 );
add_action( 'woocommerce_after_shop_loop_item', 'rf_custom_product_button', 20 );
In the above code, Change the "custom_button" to the name of the field which you create using ACF.
Just wanted to ask if anyone here can tell me how to include the current product category name at the top of the single product page in Woocommerce.
I'm going to want to place it above the breadcrumb trail at the top of my product page. I've included a link to an example of what I'm looking for here: http://www.espguitars.com/guitars/signature/kirk.html -
Notice at the top right-hand corner of the page you'll see the current category name, in this case, the category name is Guitars. I realize that the site example I've given is not a wordpress site, but I feel certain there's a way to do this with woocommerce.
If you check the meta.php file in the "templates/single-product" folder of the WooCommerce plugin, you'll see how the WooCommerce plugin displays the product categories of the current product as product meta information.
<?php
...
global $post, $product;
?>
<div class="product_meta">
...
<?php echo $product->get_categories( ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', sizeof( get_the_terms( $post->ID, 'product_cat' ) ), 'woocommerce' ) . ' ', '.</span>' ); ?>
...
</div>
Please copy the code to your theme and modify it accordingly.