Move Product Variations « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

Move Product Variations

15 posts from 3 voices

Started 9 months ago by Graffinis
Latest reply from Nick
This topic is not resolved

Tags:

Graffinis
Member

Hi guys,

Quick question with the Flashlight Theme. Is it possible to move the Product Variations to be "inside" of the Product Description Window? If not, is there a way to at least put them below the Product Description Window?

And also, can you tell me how to remove Category Tags on the product page?

Thank you,

Paul

Posted 9 months ago #
Nick
Moderator
Hi,

Below is the code to remove them, however on that same line there is also the sku number of the product. So by removing just the category and tags, you will have an empty space

Please open Flashlight Theme Options > Styling and add the code below to Quick CSS on the bottom:
```
.posted_in{display:none}
.tagged_as{display:none}
```
The code above will only make the categories/tags invisible.

To completely remove them out of the theme you would need to edit the file 'meta.php' located in the wp-content/plugins/woocommerce/templates/single-product/ .. However when you update the WooCommerce plugin you will need to do this over again since the file will be overwritten.

inside that file please remove the following two lines:
```
<?php echo $product->get_categories( ', ', ' <span class="posted_in">'.__('Category:', 'woocommerce').' ', '.</span>'); ?>
<?php echo $product->get_tags( ', ', ' <span class="tagged_as">'.__('Tags:', 'woocommerce').' ', '.</span>'); ?>
```
Thanks,

Nick
Posted 9 months ago #
Graffinis
Member

Great thanks! Is there a solution to moving the Product Variations inside of the Product Description Box, or below the Product Description Box?

Thanks again,
Paul

Posted 9 months ago #

Nick
Moderator

Hi,

Sorry about that. Try the 2 steps below, just please be aware that if you update the WooCommerce plugin, these modifications will be overwritten, so please make a note of this post. Also make backups of the two files below prior to editing them:

1) In the directory "wp-content/plugins/woocommerce/templates/single-product/tabs" please open the file tab_attributes.php, and replace the entire file with the code below:

<?php global $product;

$show_attr = ( get_option( 'woocommerce_enable_dimension_product_attributes' ) == 'yes' ? true : false );

if (( $show_attr && $product->has_dimensions() ) || ( $show_attr && $product->has_weight() ) ) {
	?>
	<li class="attributes_tab"><a href="#tab-attributes"><?php _e('Additional Information', 'woocommerce'); ?></a></li>
	<?php
}
?>

2) In the same directory as step 1, open a file called description.php and replace the contents with the code below

<?php
/**
 * Description Tab
 */

global $woocommerce, $post, $product;

if ( $post->post_content ) : ?>
	<div class="panel entry-content" id="tab-description">

		<?php $heading = apply_filters('woocommerce_product_description_heading', __('Product Description', 'woocommerce')); ?>

		<h2><?php echo $heading; ?></h2>

		<?php the_content(); ?>

	<?php if ( $product->has_attributes()) { ?>
    <?php $heading_att = apply_filters('woocommerce_product_additional_information_heading', __('Additional Information', 'woocommerce')); ?>
		<h2><?php echo $heading_att; ?></h2>

		 <?php $product->list_attributes();} ?>
	</div>
<?php endif; ?>

Thanks,

Nick

Posted 9 months ago #

Graffinis
Member

Thanks Nick!

I gave it a shot and replaced both php files with the codes and it didn't work. Do you have any other suggestions? I am really impressed with you guys for getting back to me so quickly. I know you must be super busy to say the least.

Best,
Paul

Posted 9 months ago #
Nick
Moderator

Hi Paul,

We do our best.

I am surprised it didn't work for you. I tested it, and it did the trick. Did it throw an error? What occurred? Is the site the same as your name links to? If so would you show me the page where you have variations? I was going by my local copy and just now noticed that your name is linked.

Thanks,

Nick

Posted 9 months ago #
Graffinis
Member

Oddly enough nothing occurred. Here is a page that has variations: http://graffinis.com/shop/over-the-bridge-string-bikini
I basically want to put the variations options underneath the Description Tab. Or actually within the Description Tab window itself if that's possible.

Thanks again,
Paul

Posted 9 months ago #
Ismael
Moderator

Hello,

Open woocommece-config > config.php, find this code

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);

add this code below.

remove_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );

then find this code

add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 50);

below add this

add_action( 'woocommerce_single_product_summary', 'woocommerce_variable_add_to_cart', 55 );

Cheers,
Ismael

Posted 9 months ago #
Nick
Moderator

Hi Paul,

Hehe. Actually, since you spoke of variations, they indeed were moved, its just your shop must not use that option. There are three in the theme - related products, product variations, and also related cross sell which are in different tabs (in the flashlight theme, I just didn't realize you meant related products when you said product variations which would be in a second tab next to description tab. (identical product but in different colors for example).

Please give me a few hours. Should it be moved above the social network buttons in Description tab?

Thanks,

Nick

Posted 9 months ago #
Graffinis
Member

Ahhh ok. That would make sense. If they could be located above the social icons that would be great. Or if that's too much of a headache, having the variations just below in their own window in between the product window and related products window would be cool too.

Would ismaels coding accomplish this at all?

Thanks again!

Paul

Posted 9 months ago #
Nick
Moderator

Paul,

I have full faith in Ishmael's code, Since my code surprisingly produced no results, we don't have anywhere to go but up. :)

Thanks,

Nick

Posted 9 months ago #
Graffinis
Member

No dice guys...sorry. It moved my side menu to the middle of the page where the main image is.
I changed it back right away. The ironic thing is that the side menu moved to the center, but the variations didn't move from their top position. Is there a way to send an image through this post?

Thank you,
Paul

Posted 9 months ago #
Nick
Moderator

Hi,

You can use this http://imgur.com/ to post an anonymous image and drop a link here.

Thanks,

Nick

Posted 9 months ago #
Graffinis
Member

Ok here you go. This is the result when I used Ismael's code.

This is what I am trying to do:

Opt 1 with Variations underneath the Product Description Box

Opt 2 with Variations located within the Product Description Box

Thanks guys!

Posted 9 months ago #
Nick
Moderator

Hi,

Yes, that's what I thought you wanted originally and that was my answer. The thing is, your theme is quite different from mine and I can't recreate the way your site is setup. This is how things look for me. (see below Top image shows product, and second image shows product when the variations tab is clicked.

I am not sure what was customized to get the bra sizes in a select box. I am using newest versions of both theme and plugin, and I am unfortunately unable to get to the starting point and replicate how your page looks. The instructions that Ishmael posted work for me. Let me see if someone here is more familiar with Woo Commerce plugin.

1) Notice variations are behind the tab -> http://i.imgur.com/KeiGY.png
-------------------
2) After tab is clicked variations show, but no select box -> http://i.imgur.com/vfINk.png

Thanks,

Nick

Posted 9 months ago #