Editing "Email Customer Care", "Shipping Information", etc. on checkout page

[stoukan]

Hi Swift Ideas,

I earlier asked if it was possible to change the wording of the links at the top of the checkout page, and the forum told me to add the code shown below. This worked, but I’ve noticed that this jams the links in the navigation, so that you can’t click on them (“Home”, “About”, etc.). Any help would be extremely appreciated 🙂

Thanks for your patience,
Sarah

—-

<?php

add_filter(‘woocommerce_get_availability’, ‘availability_filter_func’);
function availability_filter_func($availability) {
$availability[‘availability’] = str_ireplace(‘Out of stock’, ‘Coming soon’, $availability[‘availability’]);
return $availability;
}

/*
*
* Neighborhood Functions – Child Theme
* ————————————————
* These functions will override the parent theme
* functions. We have provided some examples below.
*
*
*/

/* LOAD PARENT THEME STYLES
================================================== */
function neighborhood_child_enqueue_styles() {
wp_enqueue_style( ‘neighborhood-parent-style’, get_template_directory_uri() . ‘/style.css’ );

}
add_action( ‘wp_enqueue_scripts’, ‘neighborhood_child_enqueue_styles’ );

/* NEW THEME OPTIONS SECTION
================================================== */
// function new_section($sections) {
// //$sections = array();
// $sections[] = array(
// ‘title’ => __(‘A Section added by hook’, ‘swift-framework-admin’),
// ‘desc’ => __(‘<p class=”description”>This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>’, ‘swift-framework-admin’),
// // Redux ships with the glyphicons free icon pack, included in the options folder.
// // Feel free to use them, add your own icons, or leave this blank for the default.
// ‘icon’ => trailingslashit(get_template_directory_uri()) . ‘options/img/icons/glyphicons_062_attach.png’,
// // Leave this as a blank section, no options just some intro text set above.
// ‘fields’ => array()
// );

// return $sections;
// }
// add_filter(‘redux-opts-sections-sf_neighborhood_options’, ‘new_section’);

function sf_woo_help_bar() {
$options = get_option(‘sf_neighborhood_options’);
$help_bar_text = __($options[‘help_bar_text’], ‘swiftframework’);
$email_modal = __($options[’email_modal’], ‘swiftframework’);
$shipping_modal = __($options[‘shipping_modal’], ‘swiftframework’);
$returns_modal = __($options[‘returns_modal’], ‘swiftframework’);
$faqs_modal = __($options[‘faqs_modal’], ‘swiftframework’);
?>
<div class=”help-bar clearfix”>
<span><?php echo do_shortcode($help_bar_text); ?></span>

• <?php _e(“Email customer care”, “swiftframework”); ?>
• <?php _e(“Delivery information”, “swiftframework”); ?>
• <?php _e(“Changes to order”, “swiftframework”); ?>
• <?php _e(“F.A.Q.’s”, “swiftframework”); ?>

</div>

<div id=”email-form” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”email-form-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”email-form-modal”><?php _e(“Email customer care”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[’email_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”shipping-information” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”shipping-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”shipping-modal”><?php _e(“Shipping information”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘shipping_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”returns-exchange” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”returns-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”returns-modal”><?php _e(“Returns & exchange”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘returns_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”faqs” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”faqs-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”faqs-modal”><?php _e(“F.A.Q.’s”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘faqs_modal’]); ?>
</div>
</div>
</div>
</div>

<?php }
?>

[Mohammad – SUPPORT]

Hi,
I am not able to view your website. Just need a password.
Thanks
Mohammad

[stoukan]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please insert the code again.
Thanks
Mohammad

[stoukan]

Hi Mohammad,

Please take a look here, I just put it up. And sorry, the code is slightly different than what I posted above. It’s the code shown below

function sf_woo_help_bar() {
$options = get_option(‘sf_neighborhood_options’);
$help_bar_text = __($options[‘help_bar_text’], ‘swiftframework’);
$email_modal = __($options[’email_modal’], ‘swiftframework’);
$shipping_modal = __($options[‘shipping_modal’], ‘swiftframework’);
$returns_modal = __($options[‘returns_modal’], ‘swiftframework’);
$faqs_modal = __($options[‘faqs_modal’], ‘swiftframework’);
?>
<div class=”help-bar clearfix”>
<span><?php echo do_shortcode($help_bar_text); ?></span>

• <?php _e(“Email customer care”, “swiftframework”); ?>
• <?php _e(“Delivery information”, “swiftframework”); ?>
• <?php _e(“Changes to order”, “swiftframework”); ?>
• <?php _e(“F.A.Q.’s”, “swiftframework”); ?>

</div>

<div id=”email-form” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”email-form-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”email-form-modal”><?php _e(“Email customer care”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[’email_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”shipping-information” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”shipping-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”shipping-modal”><?php _e(“Shipping information”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘shipping_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”returns-exchange” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”returns-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”returns-modal”><?php _e(“Returns & exchange”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘returns_modal’]); ?>
</div>
</div>
</div>
</div>

<div id=”faqs” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”faqs-modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”ss-delete”></i></button>
<h3 id=”faqs-modal”><?php _e(“F.A.Q.’s”, “swiftframework”); ?></h3>
</div>
<div class=”modal-body”>
<?php echo do_shortcode($options[‘faqs_modal’]); ?>
</div>
</div>
</div>
</div>

<?php }
?>

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.modal.fade{
top:25% !important
}

Thanks
Mohammad

[stoukan]

Thank you, that kind of worked but now there’s a multi-part issue:

If I insert it as you have it (25%), it now doesn’t let me click on the customer care modal link.

If I insert it as at 50% instead, I can click on the customer care modal link, but now the screens that pop up when you click customer care, delivery information, etc., appear very low on the page. Any suggestions?

Thank you for all your help!

[Mohammad – SUPPORT]

Hi,
Please remove last code and use new code.

.modal.fade{
top:30% !important
}

Thanks
Mohammad

[stoukan]

Hi Mohammad,

I just tried and unfortunately that still doesn’t work, I am still unable to click on “Customer Care”

Sarah

[Mohammad – SUPPORT]

Hi,
Please change 30% to 35% in last code.
Thanks
Mohammad

[stoukan]

This reply has been marked as private.

[David Martin – Support]

Hi,

What is your username? What page URL is this for?

Thanks,
David.

[stoukan]

This reply has been marked as private.

[David Martin – Support]

Hi,

Can you please explain your issue further for me, you are looking to move the model further up the page?

Thanks,
David.

[stoukan]

Hi David,

Yes exactly. For some reason the code below moved the content for the modal links down the page, and I’d like to move them back up.

Best,
Sarah

.modal.fade{
top:30% !important
}