I'm trying to display the variations of a products in the category page, something like
"Product Image"
"Product Title"
from $107 - $ 200 (I got this done)
Available in: 5lb / 10lb / 20lb (I'm trying to achieve this)
I read online and found this function but i couldn't get it to work, keep saying function does not exist.
<?php
/**
* Loop Price
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
?>
<?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?>
<?php
**if ($product->get_variation_attributes(size)) {
echo $product->get_variation_attributes(size);
}**
?>
What i wish to achieve is fairly simple, I just need to let customers know that there are different bag size of my products available, however a simple "From $100" as per custom woocommerce template does not let novice online shopper know that means there are other variations.
I've added Size attribute under each of my variation products like 5KG, 6KG, 7Lb, and hope to display them in front page in red.
I do not need sophiscated solutions like drop down list or whatsoever, just plain display if variation is available.
Hope Someone can point me to some direction.
Update: This is my current solution, however, If i can list down the variation available it will be a bonus.
if ( $product->max_variation_price && $product->max_variation_price !== $product->min_variation_price ) {
echo "<span style='font-size:75%; color: red; display: block;'>Available in Various Sizes</span>";
}
Related
how can I replace these codes?
I want to take the h1 tag into the price span
enter image description here
You have to add a snippet to your functions.php like this to remove the title:
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
After that, you have to add a file price.php to your theme in the following folder (you need to create that folder in your theme root):
woocommerce/loop/
With this content
<?php
/**
* Loop Price
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/price.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $product;
?>
<?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price">
<h1 class="woocommerce-loop-product__title">
<?php echo get_the_title(); ?>
</h1>
<?php echo $price_html; ?>
</span>
<?php endif; ?>
Am using The7 Theme. Since I wanted to create a NEWS section to post latest news (apart from the Blog, which is separate), I used the Custom Post Type UI plugin to create a custom post type named news
I created a new file in my child theme, by copying the contents of the parent theme's archive.php file and named it as archive-news.php, with a minor modification:
<?php
/**
* Archive pages.
*
* #since 1.0.0
*
* #package The7\Templates
*/
defined( 'ABSPATH' ) || exit;
$config = presscore_config();
$config->set( 'template', 'archive' );
$config->set( 'layout', 'masonry' );
$config->set( 'template.layout.type', 'masonry' );
get_header();
?>
<!-- Content -->
<div id="content" class="content" role="main">
<div class="news_years text-center">
<?php for( $i = date('Y'); $i >= 2009; $i-- ) { ?>
<?php echo $i; ?>
<?php } ?>
</div>
<?php
//the_archive_description( '<div class="taxonomy-description">', '</div>' );
if ( have_posts() ) {
the7_archive_loop();
} else {
get_template_part( 'no-results', 'search' );
}
?>
</div><!-- #content -->
<?php do_action( 'presscore_after_content' ); ?>
<?php get_footer(); ?>
So the modification done was that I commented out the description that would be shown at the top of the page, and added year buttons.
After this, when the www.mysite.com/news was accessed, it pretty well loaded all my news items and when clicking an item, it loaded the detailed page as well. And the pagination also works very well, as it inherits the parents theme's template files.
The problem am facing is, I want to make it display year wise items also. Say for example, right now, when accessing the www.mysite.com/news url, it loads up all the News items with pagination. I want to filter it based on a particular year. That's why I included the additional FOR loop in the above code.
Upon searching, I found that the WP Query has date parameters that can be used which will resolve my issue.
But am not sure how to apply this as this archive page is already doing the fetching of posts. And also, how to pass the year in the URL as well. Any pointers would be highly appreciated.
If this is not the right forum to ask this question, please feel free to move this thread to the apt forum. Thank you.
I am creating custom search feature in a theme. I have created a form on the homepage and with action set to a custom php search page. Form looks like this somewhat. I AM GETTING Class WP_Query not found Error. How to make it work?
The woo-search.php looks like this. I am using this as a template file. forms action attribute links to the page which has this template applied
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
* Template Name: Search Page
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php
global $wp_query;
global $wpdb;
if (isset($_POST['submit'])) {
// echo "Submitted <br>";
$product_kinds = $_POST['product-kinds'];
echo $product_kinds;
$the_query = new WP_Query(array('category_name' => '2-wheeler-batteries'));
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
}else{
echo "Get Away";
}
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
For demonstration purpose the query inside wp_query is static. I want to display the search result just like the shop page looks like, I mean with product image, then title, then price and add to cart button. With above code I will need to fetch all seperately and code it to look like the shop page. How do I fetch Woocommerce layout in this search results. What changes should I make in the while loop.
I'm using the [Product Add-ons][1] extension for WooCommerce, which allows custom fields for products. This automatically displays on the single product template.
By some trial and error with the single product template, it appears to hook in somewhere in woocommerce_single_product_summary (single_meta?).
I need to get this same set of form fields to display on the archive-product template (the list of products). In my case, this is a field for a card request and one for delivery date. Both are needed before the product can be added to the cart from the product archive. I'm not sure if there is a function I can call for this, if it involves some more advanced coding.
Per Pelmered's answer, I was able to get the add-on fields to show up with adding this to functions.php:
add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);
1ST ATTEMPT
Then, the problem was that the product archive was not creating a form element, only an anchor link for the add to cart button. So I've tried manually putting in a form. Code from content-product.php:
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<h2><?php the_title(); ?></h2>
<?php // MANUALLY PUT IN FORM, BECAUSE HOOKS ONLY PUT IN A BUTTON AND NO FORM. NEEDED FOR ADD-ON FIELDS ?>
<form class="cart" method="post" enctype='multipart/form-data'>
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
<div itemprop="description">
<?php the_content(); ?>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
</form>
<?php //do_action( 'woocommerce_after_shop_loop_item' ); ?>
This worked, but kind of messes up the AJAX submission and flash messages. After clicking the add to cart button, the page appears to refresh, and then it looks like nothing happened. But when you go to another page, it displays the messages (and multiple can stack).
2ND ATTEMPT
So I saw that the original AJAX cart button (not within a form) was using a query string to send the product ID. So I am now attempting to tack on additional parameters by modifying the add to cart JS. This worked. What I did added as the accepted answer.
I've found a solution that works, using jQuery to add the form field values to the AJAX request. This requires overriding add-to-cart.js with your own version, so future updates to that file may need to be merged.
In functions.php
// display add-on fields in woocommerce_after_shop_loop_item_title
add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);
// Our custom cart JS to allow for product add-on fields on product archive
add_action( 'wp_enqueue_scripts', 'load_woo_scripts', 9 );
function load_woo_scripts() {
wp_enqueue_script( 'wc-add-to-cart', get_template_directory_uri() . '/js/add-to-cart.js', array( 'jquery' ), WC_VERSION, true );
}
Duplicate /assets/add-to-cart.js from the woocommerce plugin folder, and add to the folder referenced in load_woo_scripts. Then add the following after the var date = { statement (line 21).
// =========================================================================
// ADD PRODUCT ADD-ON FIELDS TO SUBMISSION (to allow from product archive)
// Store name and value of fields in object.
var addonfields = {};
$(this).parent().find(".after-shop-loop-item-title :input").each(function() {
addonfields[this.name] = $(this).val();
});
// Merge new fields and existing data
data = $.extend(data, addonfields);
// Testing: final value of data
console.log( data );
// =========================================================================
This adds the names and values of all input fields within the .after-shop-loop-item-title div. I've added this div/class to my theme's woocommerce/content-product.php template:
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<h2><?php the_title(); ?></h2>
<div itemprop="description">
<?php the_content(); ?>
</div>
<div class="after-shop-loop-item-title">
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
</div>
<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
Note that in my case, I am only using a textarea and a text input. Neither of which changes the price. More advanced usage of the extension may require more work.
I really hope that WooCommerce makes this easier in the future...
It's impossible to give you an exact copy-paste solution without access to the code, but it should be possible to attach the same function that is being hooked.
The hook that adds this to the single product page probably looks like this:
add_action( 'woocommerce_single_product_summary', array($this, 'woocommerce_product_add_ons_something'));
To attach this action to the achive template as well you should probably be able to do something like this:
add_action( 'woocommerce_after_shop_loop_item_title', array('WC_Product_Add_On', 'woocommerce_product_add_ons_something'));
WC_Product_Add_On is the class name of the plguin and needs to be changed to match the class that has the function/method in the action. Put this code in the functions.php file in your theme.
See if it works. If not, give me more information and I can expand my answer.
If anyone want to display woocommerce product addons fields everywhere, you can do this:
$custom_field = get_post_meta( $product_id, '_product_addons', false );
foreach( $custom_field as $field => $value) {
foreach( $value as $val => $v) {
echo $v["name"]; // or other field that you want!
}
}
Enjoy!
I'd like to display my out of stock items, but without price in WooCommerce. Is there any easy way to hide price of "out of stock" items?
Thanks!
Adding these to the CSS worked for me. The first one removes the price from the out of stock item's page and the second removes the price from the out of stock item in search results.
.outofstock .price{display:none}
.outofstock .amount{display:none}
Create a file price.php in /your-theme/woocommerce/single-product/ folder. Paste the following code.
$pricelabel = ""; - will be the variable that will display instead of the price if the stock quantity is 0.
If you use $pricelabel = ""; - this will remove the price. You can try $pricelabel = "SOLD OUT!"; or whatever message you want to display if you want.
I actually wrote this code to display a text message instead of a particular price. I just changed it to check stock quantity instead of price.
<?php
/**
* Single Product Price, including microdata for SEO
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $product;
?>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<p class="price"> <?php
$stockamount = $product->get_stock_quantity();
$price = $product->get_price_html();
$pricelabel = "";
if($stockamount == 0)
{
echo $pricelabel;
}
else
{
echo $price;
};
?>
</p>
<meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
<link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
</div>
stick this in functions
add_filter( 'woocommerce_get_price_html', 'remove_price_ofs', 10, 2 );
function remove_price_ofs( $price, $product ) {
if ( ! $product->is_in_stock()) {$price = '';}
return $price;
}
In cases like this I use CSS.
I would typically go use Chrome's inspect element (or any code browser), find the class of the Out of Stock price (could be something like .outOfStockPrice).
Then I would use something like Simple Custom CSS to apply my custom CSS (so I do not have to look for a specific file: http://wordpress.org/plugins/simple-custom-css/)
And add this to your custom css:
.outOfStockPrice {
visibility: hidden;
}
For more info on hiding elements using CSS: http://www.kirupa.com/html5/hiding_things_using_css.htm
very simple, woocommerce still add outofstock class to the whole page so use that and than price
this will work
.outofstock .price{display:none}