How to Add Attribute Terms Image in WooCommerce? - wordpress

In WooCommerce, I have created an attribute "Brand", and added some terms, like "Brand One", "Brand Two" etc..
I want to add an image for each term.
Right now there is no option to add image in attribute terms.
Please tell me how to add image in attribute terms.
An admin link is like this:
.../wp-admin/edit-tags.php?taxonomy=pa_brand&post_type=product'

WooCommerce stores product attributes outside of the usual taxonomy table, so you'll need to go with something more WC-specific. Try the Variation Swatches and Photos extension.
UPDATE: You can use the Taxonomy Images plugin but you have to make a minor alteration. By default the plugin only displays taxonomies that are set to display in the admin area (i.e. the show_ui value is set to true). WooCommerce hides the product attribute taxonomies by default, so the plugin will not display them in the settings screen. You can change this behaviour by commenting out/deleting lines 402-402 of taxonomy-images.php:
if ( ! isset( $taxonomy->show_ui ) || empty( $taxonomy->show_ui ) )
continue
Removing these lines will allow he plugin to display all taxonomies, regardless of whether they are hidden or not.
Props to #helgatheviking for suggesting that plugin in the first place

With the "Variation Swatches" plugin (see the answer by #Dre), everything works smoothly, and getting the image is as easy as this:
$swatch_term = new WC_Swatch_Term( 'swatches_id', $term_id, $taxonomy, false,
'swatches_image_size' );
$html = '<img src="' . $swatch_term->thumbnail_src . '" alt=""/>';
The "Taxonomy Images" has not been updated since WP 3.6.1...

Technically a WooCommerce "attribute" is just a WordPress Custom Taxonomy. Therefore I would try something like the Taxonomy Images plugin.

"Variation Swatches and Photos extension" plugin is premium and no body would like to purchase that to serve such a purpose as getting an icon image for a brand.
The "Taxonomy Images" has not been updated since WP 3.6.1...
What I came up with is Category and Taxonomy Image and that does the job.
Here's how you can get the image URL:
if (function_exists('get_wp_term_image'))
{
$meta_image = get_wp_term_image($term_id);
//It will give category/term image url
}
echo $meta_image; // category/term image url

I've fixed this issue. Actually i was not passing the right value in taxonomy. I was using variation swatches plugin so was not know which value to pass for taxonomy. below is the working code. I was trying to fetch "brands" attributes list with images.
$attribute_taxonomies = wc_get_attribute_taxonomies();
$taxonomy_terms = array();
if ($attribute_taxonomies) :
foreach ($attribute_taxonomies as $tax) :
if (taxonomy_exists(wc_attribute_taxonomy_name($tax->attribute_name))) :
if($tax->attribute_name=="brands"){
$taxonomy_terms[$tax->attribute_name] = get_terms(wc_attribute_taxonomy_name($tax->attribute_name), 'number=6&orderby=name&hide_empty=1');
}
endif;
endforeach;
endif;
foreach ($taxonomy_terms as $item) :
foreach($item as $child):
//print_r($child);
$thumbnail_id = get_woocommerce_term_meta( $child->term_id, 'product_pa_brands', true );
$textureImg = wp_get_attachment_image_src( $thumbnail_id );
//we are getting image in $textureImg[0]
}
endforeach;
endforeach;

Related

Show content before main content based on color attribute

I found a code snippet to display the content before the main content and it worked.
Currently the content is displayed on all pages. (except shop page)
The code :
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
if(!is_shop()){
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
What I want to ask is, how to display content only for color attribute products in the form of links.
Example :
The display (content) will ONLY SHOW when the url is like this :
mysite.com/color/red/
Sorry if the explanation is not good because I don't really understand this.
Any help is greatly appreciated.
thank you
I understand your question is about displaying that extra content, if the current query is for a product archive page only showing products of a certain attribute 'color'.
Each WooCommerce attribute is an independent taxonomy.
WordPress's is_tax('parameter') function checks, if the query is for an existing custom taxonomy archive page (other than category & tag) & if the query is for that specific taxonomy 'parameter', in your case 'color'.
So, this code snippet in your functions.php or equivalent plugin should work:
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
(is_tax('color')) {
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
Though, to make the above template WooCommerce override work, declare WooCommerce support for your theme by adding the following lines to your functions.php or plugin equivalent:
function theme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'theme_add_woocommerce_support' );

Switch Between Multiple Headers in WordPress Theme

I am building a custom theme for WordPress. One thing I want to do is allow myself to switch the header from the edit page.
I know I can hard code in the header to switch based on the page ID or name, like this:
<?php
if(is_page(10)) {
get_header('new');
}
else {
get_header();
}
wp_head();
?>
But I want a drop down menu similar to the Page Template option in the sidebar. (See screenshot)
Screenshot of sidebar menu
I have looked for any online tutorials that cover this type of option, but they all cover the basic ID or name setup shown above.
Does anyone know of a good tutorial to create a drop down similar to Page Templates to use for multiple headers?
You can use Custom Metaboxes. That link contains a comprehensive tutorial on creating custom metaboxes for post meta fields by hand. You can also use a plugin like Advanced Custom Fields to create them.
Doing this would allow you to check for the header style value through get_post_meta() or get_field(), respectively.
<?php
// If using the Custom Metabox/post_meta approach:
$header_style = get_post_meta( get_the_ID(), 'my_custom_header', true );
// If using ACF:
$header_style = get_field( 'my_custom_header', get_the_ID() );
if( $header_style == 'new' ){
get_header('new');
if( $header_style == 'something-else' ){
get_header('something-else');
} else {
get_header();
}
?>

Display additional product information (e.g. image caption) when hovering product image

I'm using using the WooCommerce plugin for WordPress to display my products. The thing is, when you are viewing the product category (archive), you can see the product name, image and price, but that doesn't really say all that much about exactly what the product is.
What I would like is for some more information to become available when you hover the product images. Something a bit like this.
Would it be possible to retrieve some of the information about the image, that I can enter in the WordPress media libray: title, caption alt text or description?
You can check the webshop here.
EDIT:
I found that editing the content-product.php file in the WooCommerce plugin folder, if I put this:
?>
random text
<?php
somewhere inside the php tags in the <li> section of that file, I could get 'random text' to show either above or below the product image on the product archive page. So, if I could replace that with a function that would retreive for instance the product image caption or some custom field that I can fill out for each product, that would go a long way towards solving the issue.
So, if anyone knows of a function that does this, please share it here.
hello sir just use this plugin
https://wordpress.org/plugins/woocommerce-custom-product-data-fields/
for retrieving any costume fields do like this
Retrieving multiselect value
global $wc_cpdf;
$multiselect = $wc_cpdf->get_value($post->ID, '_mymultiselect');
foreach ($multiselect as $value) {
echo $value;
}
Retrieving image value
global $wc_cpdf;
$image_id = $wc_cpdf->get_value($post->ID, '_myimage');
$size = 'thumbnail';
$image_attachment = wp_get_attachment_image($image_id, $size);
echo $image_attachment;
}
I recently did this with a website for a client. I changed the hover text for each product from "Add to Cart" to the product short description. Here is my code:
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
//get the product object
global $product;
$id = $product->get_id();
$descript = $product->get_short_description();
//take out html from description
$descript1 = strip_tags($descript);
//shorten description length to fit the product image box
if (strlen($descript1) > 100){
$descript1 = substr($descript1, 0, 99) . '...';
}
return __( $descript1, 'woocommerce' );
}

Wordpress latest posts menu item

I'm trying to get Wordpress to give me a menu item to go to "latest posts." They come up on the frontpage, but once I navigate away, I want a menu item to get back there. It seems so obvious, but several hours later, the best I could do was create a custom menu with a link to "uncategorised" as a workaround. There MUST be a better way! And this way, I get a box saying "Archive of posts filed under the Uncategorized category. " Not wanted!
Create a custom page in your template directory (http://codex.wordpress.org/Pages#Page_Templates) with a custom query (check at http://codex.wordpress.org/Class_Reference/WP_Query, http://codex.wordpress.org/Function_Reference/query_posts or http://codex.wordpress.org/Template_Tags/get_posts).
Create a page in your admin and select the template you created.
Add a link to this page in your menu and you're done.
Maybe this will help: http://www.viper007bond.com/2011/09/20/code-snippet-add-a-link-to-latest-post-to-wordpress-nav-menu/
It's a filter that will 'search and replace' placeholder anchors such as '#latestpost1' with the actual url of the latest post, and thus dynamically modify the menu before it's rendered.
I'm not sure how this is for SEO, but it's a clever solution.
Give all your posts a category name. Use something generic like "News", "Articles" or "Blogs". Then, choose the category with the name you picked from the menu page under categories. Add this category link to your menu. Rename the link whatever you wish - "Blog" - for example. And, viola - all your posts will appear when people click on that link.
Try this plugin: https://de.wordpress.org/plugins/dynamic-latest-post-in-nav-menu/ works really well and code is open sourced here: https://github.com/hijiriworld/dynamic-latest-post-in-nav-menu
simple solution:
I took this guy's code: http://www.viper007bond.com/2011/09/20/code-snippet-add-a-link-to-latest-post-to-wordpress-nav-menu/
Basically what he wrote is for the menu item to link to the latest post, not posts (plural), so I just modified it and it's working:
<?php
if ( ! is_admin() ) {
// Hook in early to modify the menu
// This is before the CSS "selected" classes are calculated
add_filter( 'wp_get_nav_menu_items', 'replace_placeholder_nav_menu_item_with_latest_post', 10, 3 );
}
// Replaces a custom URL placeholder with the URL to the latest post
function replace_placeholder_nav_menu_item_with_latest_post( $items, $menu, $args ) {
// Loop through the menu items looking for placeholder(s)
foreach ( $items as $item ) {
// Is this the placeholder we're looking for?
if (!strpos(($item->url), 'latestpost'))
continue;
// if ( 'latestpost' != $item->url )
// continue;
// Get the latest post
$latestpost = get_posts( array(
'numberposts' => 1,
) );
if ( empty( $latestpost ) )
continue;
// Replace the placeholder with the real URL
$new_link = $item->url;
$new_link = substr($new_link, 0, strlen($new_link) - 12);
$item->url = $new_link;
}
// Return the modified (or maybe unmodified) menu items array
return $items;
}

Wordpress widget for post specific content in sidebar

I am looking for a wordpress plugin that will allow me to add a paragraph to the sidebar that is specific to the blog post. I would need to be able to add that text when creating the post. Is there something out there like that? I have been unsuccessful in searches.
Thanks
This can be easily solved using Custom Fields, the Text Widget and a Shortcode.
This bit of code goes in the theme's functions.php or, preferable, within a custom plugin.
1) Enable shortcodes for the Text Widget
add_filter( 'widget_text', 'do_shortcode' );
2) Define the shortcode, read comments for details
add_shortcode( 'mytext', 'so_13735174_custom_text_widget' );
function so_13735174_custom_text_widget( $atts, $content = null )
{
global $post;
// $post contains lots of info
// Using $post->ID many more can be retrieved
// Here, we are getting the Custom Field named "text"
$html = get_post_meta( $post->ID, 'text', true );
// Custom Field not set or empty, print nothing
if( !isset( $html ) || '' == $html )
return '';
// Print Custom Field
return $html;
}
3) Add a Text Widget in the desired sidebar.
Leave the title empty and put the Shortcode in the content: [mytext].
4) Now each page or post with a Custom Field named text will have its value printed in the Widget.
5) The $html can get fancy and multiple Custom Fields can be used.
This isn't something that I've ever personally done, but try this.
Summary: You will add the a paragraph using a custom field, then display it in a widget.
Details:
First, make sure custom fields are enabled. Edit a post, then click
the "screen options" at the top right of the page. If "Custom
Fields" isn't checked, check it. You should now see a custom field
area below the post editor.
Come up with a name for your custom field. Perhaps
"extra_paragraph". Now put that in the "name" field in the custom
field area.
Write your paragraph in the "value" field the custom field area.
Install the Custom Field Widget plugin, set it to display this
new "extra_paragraph" field. (widget appears to be untested with newer versions of Wordpress so cross your fingers!)
Now when you write or edit posts you should see this "extra_paragraph" field as an option in the "name" dropdown.

Resources