Categories
WordPress

How To Remove The WooCommerce Additional Information Tab

Recently I was working with a designer to complete an eCommerce site using the WooCommerce WordPress plugin. A default WooCommerce product page displays the content entered into the WordPress editor as the content under the product description tab. The review tab displays all the product reviews and allows people to submit reviews. Then there is the additional information tab that only displays the weight, dimensions, and the attributes for a product. If no weight, dimensions, or attributes are entered for a product the additional information tab is not displayed.

There is no option in the WordPress admin to customize the additional information tab content and the necessary information (the dimensions) can be added to the description tab. I considered changing the name of the additional information tab and customizing the content displayed in the additional information tab using the woocommerce_product_tabs filter.  The final solution which I am going to share with you is to completely remove the additional information tab.

To remove the additional Information tab add the following code to your site functionality plugin or your themes functions.php file.


//remove additonal info tab from products
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
 
function woo_remove_product_tabs( $tabs ) {
    global $product;
	
	if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) {
        unset( $tabs['additional_information'] );   
    }
    return $tabs;
}
//Source: http://docs.woothemes.com/document/editing-product-data-tabs/

The code above will change the product page so that there are only two tabs: Description and Reviews.

Woocommerce Product Tabs After

 

Categories
WordPress

Open WordPress Gallery Images In Lightbox

Woo Commerce already uses Pretty Photo for the product gallery and the product image. When you add a WordPress gallery to the product description the images don’t open using the Pretty Photo Lightbox. So I set on a mission to open WordPress gallery images in a lightbox. According to the Pretty Photo documentation all I needed to do was add the “rel attribute” to each image link. Originally I was looking for a filter to alter the gallery output. I ended up filtering “wp_get_attachment_link” to edit the image link. After viewing the code for the product gallery and the product image I realized I needed to add a “data-rel attribute”. The code I used is below.

add_filter('wp_get_attachment_link', 'ccr_add_rel_attribute');
function ccr_add_rel_attribute($link) {
    $link = str_replace('<a href','<a data-rel="prettyPhoto[gallery]" href',$link);
    return $link;
}

Solution Inspired by corsonr

Categories
WordPress

How to Add an Opt-In Box to WordPress After Your Posts

In this post I’m going to explain how to add an opt-in box to WordPress after your content and before the comment section. To do this I will be using the following WordPress plugins:

Two Fields

First create a form using Gravity Forms. Add a single text field and an email field. Change the Field label for the single text field to First Name.

Top Align

Under the form settings change the Label placement to Top aligned. Be sure to Update the Form Settings before you go back to the form editor.

To change the layout of the form fields I will use Gravity Forms ready classes.

First Name Field

On the First name advanced tab add gf_left_half as the CSS Class name.

Email Field

From the Email Field Advanced Tab add gf_right_half as the CSS Class name. Update the form.

After Content Widget

If you have not done so go to Plugins >> Add New. Search for Add Widget After Content. Install and activate the plugin. Go to Appearance >> Widgets and you should see a new widget section called After Content. Drag the Form widget to After Content and choose the form you just created. Set the title and check Display form description.

Save and now you have an optin form under every post. It is there but it is not styled. To style the optin box I added the following to my theme css file. You will want to change the css to meet your needs.

.awac-wrapper{
	border:1px solid #333;
	background:#f3f3f7;
	margin-bottom:1em;
	padding:.8em
}
.awac{
	margin-bottom:.8em
}
.awac .gform_wrapper .gform_footer{
	padding:8px 0 20px 0;
	margin:8px 0 0 0;
}

.awac .gform_wrapper input[type="submit"],.awac .gform_wrapper input[type="button"]{
	background:#333;
	color:#ffffff;
	border:1px solid #333;
}

If you don’t want the optin to display for a post you can turn it off on the post edit page. you can also add an image and explain your optin offer in more detail.

This same concept will work for an author box and other types of calls to action.

 

Note: Updated 4/25/15 to change the css to use classes instead of ids.

Categories
WordPress

Display A Gravity Form In A Light Box

Recently on Skype, Christine was asking how to display a Gravity form in a light box using the iThemes Builder theme. After trying multiple techniques found online she was not able to get it to work successfully. My first thought was to use the version of Thickbox that is included with WordPress. That would have worked but it would have required adding two lines of code to the functions dot php file and Thickbox is not responsive.

I am going to show you how to use the Royal PrettyPhoto plugin to display a Gravity form in a light box using the iThemes Builder theme.

Layout

Once the form has been created create a layout in iThemes Builder that only has a content area.

Gravity Form on Page

gravityform
Then create a page that includes only the title and the gravity form shortcode. Later I will call this the form page.

Light Box Plugin

Install and activate the Royal PrettyPhoto plugin. Then go to Settings > Royal PrettyPhoto.

Royal Prettyphoto
Change the settings to hide the photo title, hide the Photo Control, Hide the social icons, Hide the Photo Thumbnail, and Hide the Photo Nav Arrow. Be sure to save the changes.

Gravity Form In A Light Box

Now it is time to edit the page the link will be on. Add a link to the form page. For Example:

< a href="http://mydomain.com/form/">Contact Us</a> 

Then add the following query string to the end of the page url

?iframe=true&width=600&height=700

Your link should look similar to

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700">Contact Us</a> 

Let me explain so you can make changes as needed. The first query variable iframe tells it to display the page it is linking to in an iframe. The width is the width of the iframe. The example shows the width in pixels, but you can also set the width to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. The height is the height of the iframe. The example shows the height in pixels, but you can also set the height to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. If the page is bigger than the size provided scroll bars will appear.

If you were to save the page and view it in the browser the form would not display in a lightbox when the link is clicked. It would actually go to the form page. So we need to do another step.

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700" rel="prettyPhoto[iframes]">Contact Us</a> 

Add the rel attribute to the link. Save the page and view it in the browser. When you click the link the form is now loaded in the lightbox.
form in lightbox
You can also style the Thickbox as needed.

Note: If you are using a theme other than iThemes Builder you will need to create a plan page template that does not have styling. I also want to mention that displaying a Gravity form in a light box is not the best solution for mobile visitors.

Do you have a solution for displaying a Gravity Form in a light box? If so share it in the comments below.
Categories
WordPress

How To Remove The Entry Title In iThemes Builder Using A Custom Extension

There are two things that I really like about iThemes Builder — the layout engine and the extensions.

Extensions are like mini-themes for Builder in that they can have style.css and functions.php files. They can be applied to a specific Layout or to a specific View.- iThemes Codex

In a recent project I needed one layout to not show the entry-title. Since there is not a filter to alter the entry-title I considered my options and decided to just create an extension. To create the extension I added an extensions folder to my child theme. In the extensions folder I created another folder called no-title. In the no-title folder I created a file called functions.php. In the functions.php file I added the following code:

 

<?php
if ( is_admin() )
	return;

if ( ! class_exists( 'ExtensionNoTitleLayout' ) ) {
	class ExtensionNoTitleLayout {
		function ExtensionNoTitleLayout() {
			it_classes_load( 'it-file-utility.php' );
			$this->_base_url = ITFileUtility::get_url_from_file( dirname( __FILE__ ) );
			add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );	
		}
		function extension_render_content() {	
		?>
			<?php if ( have_posts() ) : ?>
				<div class="loop">
					<div class="loop-content">
						<?php while ( have_posts() ) : // The Loop ?>
							<?php the_post(); ?>
							<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
								<div class="entry-content clearfix">
									<?php the_content(); ?>
								</div>
							</div>								
						<?php endwhile;  ?>
					</div>
				</div>
			<?php else :  ?>
				<?php do_action( 'builder_template_show_not_found' ); ?>
			<?php endif;  ?>
		<?php

		}
		function change_render_content() {
			remove_action( 'builder_layout_engine_render_content', 'render_content' );
			add_action( 'builder_layout_engine_render_content', array( &$this, 'extension_render_content' ) );
		}
	} 

	$ExtensionNoTitleLayout = new ExtensionNoTitleLayout();
}

ExtensionOnce I created the extension I moved to the layout editor and selected the extension.