Docs

[pdopchev]

Hi guys,

After following this thread: https://community.theme.co/forums/topic/adding-a-button-in-a-single-product-page-woocommerce/ was able to add one more button on the single product page: http://www.dopchevproductions.com/test/product/the-80/ which was great but I am trying to add a pop up form in a lightbox to it like this thread: https://community.theme.co/forums/topic/contact-form-7-popup-2/ with the following code:

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
	
	echo '<div id="my-content" style="display: none;">';
	echo '[contact-form-7 id="1024" title="Skier Form"]';
	echo '</div>';

	echo '<div>';
	echo '<a href="#my-content" title="Skier Form">Skier Form</a>';
	echo '</div>';
	echo '[lightbox selector=".lightbox-selector"]';

}

When used in a raw element works okay: http://www.dopchevproductions.com/test/ski-graphics but not quite sure how to implement the shortcodes on the product page…
*side question: if I were to use the code in a raw element, how do I change the background of the form to black?

Also wandering how to add some space between the buttons and maybe have the Skier Form come first in order…

Using “before” in: add_action('woocommerce_before_add_to_cart_button','cmk_additional_button'); makes everthing really messy – see screengrab]

Your help would be greatly appreciate it!

[Rad]

Hi there,

Thanks for writing in.

Please change it into this,

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
	
	echo '<div id="my-content" style="display: none; width: 600px; ">';
	echo '[contact-form-7 id="1024" title="Skier Form"]';
	echo '</div>';

	echo '<div>';
	echo '<a href="#my-content" class="product_lightbox" title="Skier Form">Skier Form</a>';
	echo '</div>';

	echo do_shortcode( '[lightbox selector=".product_lightbox"]' );

}

We’ll see if we can change the CSS once this is implemented.

Thanks!

[pdopchev]

Thanks a ton! The Button is working! The actual code, which is currently in use is:

add_action(‘woocommerce_after_add_to_cart_button’,’cmk_additional_button’);
function cmk_additional_button() {

echo ‘<div id=”my-content” style=”display: none; width: 600px; “>’;
echo do_shortcode( ‘[contact-form-7 id=”1024″ title=”Skier Form”]’);
echo ‘</div>’;

echo ‘<div>’;
echo ‘Skier Form‘;
echo ‘</div>’;

echo do_shortcode( ‘[lightbox selector=”.product_lightbox”]’ );

}

I did give you wrong code info in the 1st post (skipped on some attributes in the “href” line) – my apologies for that.

To continue with this endeavor – trying to change the background of the lightbox to #000 (black) and maybe make the window wider – approximately twice as wide so you don’t have to scroll sideways to look at the content.

One more thing that came to mind: is it possible to have the button only on specific products (probably by product id or page id)?

[Paul R]

Hi,

Kindly change your code to this.

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
$product_ids = array(1,2,3,4,5,6);
if(in_array(get_the_ID(),$product_ids)){
echo '<div id="my-content" style="display: none; width: 600px;">';
    echo do_shortcode( '[contact-form-7 id="1024" title="Skier Form"]');
    echo '</div>';

    echo '<div>';
    echo '<a data-type="inline"  class="product_lightbox" href="#my-content">Skier Form</a>';
echo '</div>';

echo do_shortcode( '[lightbox selector=".product_lightbox"]' );
}
}

Change 1,2,3,4,5,6 with your product ids.

Hope that helps

[pdopchev]

Awesome! Thanks for the huge help!

Any ideas on the following part of the previous part:

“To continue with this endeavor – trying to change the background of the lightbox to #000 (black) and maybe make the window wider – approximately twice as wide so you don’t have to scroll sideways to look at the content.”

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.ilightbox-holder.light {
   background-color:#000;
}

Then kindly update xtheme and cornerstone to latest version

The latest version numbers as of this time are: (http://theme.co/changelog/)

X Theme 4.6.0
Cornerstone 1.3.0

Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

[pdopchev]

Thanks you, will update once the maintenance on my host provider is over. Any suggestions on how to adjust the size of the lightbox window? Trying to make it wider…

[Lely]

Hi There,

You’re welcome!
Regretfully, at this time I am not entirely certain which lightbox window you want to adjust because it is automatically calculated based on the screen width. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots showing which part you want to adjust), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[pdopchev]

Hi, my bad for not providing a link, it’s the lightbox window on the product page (the one that was integrated with the ‘Skier Form” button: http://www.dopchevproductions.com/test/product/the-80-custom/

Would be great, if it could be made wider than it is right now. Seems like it stretches height-wise but it’s too “skinny”.

Finally, could you please look at this issue, which got skipped – it’s from the beginning of the thread (screengrab is attached to the first post):

“Also wandering how to add some space between the buttons and maybe have the Skier Form come first in order…

Using “before” in: add_action(‘woocommerce_before_add_to_cart_button’,’cmk_additional_button’); makes everthing really messy – see screengrab]”

[pdopchev]

Quick Update:

Just notices that the product page has a different layout then before and the added button is no longer there – “Skier Form”

http://www.dopchevproductions.com/test/product/94-custom/

Any idea what happened here?
p.s. Have not changed anything since I posted the last time.
p.s.s I think there might have been an automatic wordpress update but why would that affect the changes so far since I am using a child theme?

This is what I have for code in my functions.php file:

// Additional Functions
// =============================================================================

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
  if ( ! is_admin() ) {
    return;
  }
  remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}
add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

// =============================================================================
// Sets Custom Menu For WooCommerce Shop 
// =============================================================================

add_filter( 'wp_nav_menu_args', 'custom_blog_menu' );

function custom_blog_menu( $args ) {
  if ( x_is_product() || x_is_product_index() ||  x_is_shop()) {
    $args['theme_location'] = 'primary';
    $args['menu'] = 'Shop Menu';
  }
  return $args;
}

/**
 * Changes the redirect URL for the Return To Shop button in the cart.
 *
 * @return string
 */
function wc_empty_cart_redirect_url() {
	return 'http://www.dopchevproductions.com/test/store/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

// =============================================================================
// Rename A Single Product Tab Globally 
// =============================================================================

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'Materials Information' );		// Rename the description tab
	

	return $tabs;

}

// =============================================================================
// Additional Button On Product Page with a Form Pop Up in a Lightbox
// =============================================================================

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
	
	echo '<div id="my-content" style="display: none; width: 600px; ">';
	echo do_shortcode( '[contact-form-7 id="1024" title="Skier Form"]');
	echo '</div>';

	echo '<div>';
	echo '<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>';
	echo '</div>';

	echo do_shortcode( '[lightbox selector=".product_lightbox"]' );

}

[Rue Nel]

Hello There,

The layout is messed up because of your custom contact form inside the default WooCommerce form. Please have your code update and use this instead:

// Additional Functions
// =============================================================================

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
  if ( ! is_admin() ) {
    return;
  }
  remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}
add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

// =============================================================================
// Sets Custom Menu For WooCommerce Shop 
// =============================================================================

add_filter( 'wp_nav_menu_args', 'custom_blog_menu' );

function custom_blog_menu( $args ) {
  if ( x_is_product() || x_is_product_index() ||  x_is_shop()) {
    $args['theme_location'] = 'primary';
    $args['menu'] = 'Shop Menu';
  }
  return $args;
}

/**
 * Changes the redirect URL for the Return To Shop button in the cart.
 *
 * @return string
 */
function wc_empty_cart_redirect_url() {
	return 'http://www.dopchevproductions.com/test/store/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

// =============================================================================
// Rename A Single Product Tab Globally 
// =============================================================================

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'Materials Information' );		// Rename the description tab
	

	return $tabs;

}

// =============================================================================
// Additional Button On Product Page with a Form Pop Up in a Lightbox
// =============================================================================

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {

	echo '<div>';
	echo '<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>';
	echo '</div>';

}

// =============================================================================
// Separate the form and the light away from the Woocommerce default form
// =============================================================================

add_action('woocommerce_single_product_summary','cmk_additional_form', 45);
function cmk_additional_form() {
	
	echo '<div id="my-content" style="display: none; width: 600px; ">';
	echo do_shortcode( '[contact-form-7 id="1024" title="Skier Form"]');
	echo '</div>';

	echo do_shortcode( '[lightbox selector=".product_lightbox"]' );

}

Please let us know if this works out for you.

[pdopchev]

Hi @Rue ,

Thanks for the help! Your code does work and adds the button back to the product page but the layout is still messed up. With no code for a button it looks like the first screen grab (attached below) and with the code added it changes it to the second screen grab (attached below).

// =============================================================================
// Additional Button On Product Page with a Form Pop Up in a Lightbox
// =============================================================================

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {

	echo '<div>';
	echo '<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>';
	echo '</div>';

}

// =============================================================================
// Separate the form and the light away from the Woocommerce default form
// =============================================================================

add_action('woocommerce_single_product_summary','cmk_additional_form', 45);
function cmk_additional_form() {
	
	echo '<div id="my-content" style="display: none; width: 600px; ">';
	echo do_shortcode( '[contact-form-7 id="1024" title="Skier Form"]');
	echo '</div>';

	echo do_shortcode( '[lightbox selector=".product_lightbox"]' );

}

Any ideas why the layout is still changing and ways to keep the original layout with adding a form to the button…?

link: http://www.dopchevproductions.com/test/product/the-80/

[pdopchev]

Quick update:

So the button is there with “normal” page layout with only the following code added:

// =============================================================================
// Additional Button On Product Page with a Form Pop Up in a Lightbox
// =============================================================================

add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {

	echo '<div>';
	echo '<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>';
	echo '</div>';

}

But of course there is no form linked to it…

Also, is there a way to separate the two buttons from each other (add some margin so they don’t look glued to each other)?

[Rue Nel]

Hello There,

Please update the code again and use this instead:

// =============================================================================
// Additional Button On Product Page with a Form Pop Up in a Lightbox
// =============================================================================

add_action('woocommerce_single_product_summary','cmk_additional_button', 40);
function cmk_additional_button() {

	echo '<div class="mtm mbm">';
	echo '<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>';
	echo '</div>';
	
	echo '<div id="my-content" style="display: none; width: 600px; ">';
	echo do_shortcode( '[contact-form-7 id="1024" title="Skier Form"]');
	echo '</div>';

	echo do_shortcode( '[lightbox selector=".product_lightbox"]' );

}

This will move the button and the contact form outside the form which is wrapping the add to cart button. I also added a spacing utility class so that the button will have enough space away from any other elements next to the skier form button.

Hope this helps. Please let me know. Thanks you.

[pdopchev]

Great! Thanks for the help – the space between the buttons is exactly what I was looking for. However, the page layout still keeps on changing when the code is added. Is there a work around it?

link: http://www.dopchevproductions.com/test/product/the-80-custom/

[Author]

Posts