Docs

[Johannes G]

Hello,

I have the plugin WP Simple Pay for Stripe.
I want to display the pay button as a shortcode on the back of a card element.

How?

My best regards
Johannes

[Johannes G]

I gues I need to ad sometinhg to my funcitons.php …..something comparable to this maybe? ->

// Enable shortcodes in widgets
add_filter(‘widget_text’, ‘do_shortcode’)

but i have to replace the widget_text with the card element text. (I found this code on somewhere in the internet…but i cant fully understand is) Please help.

Regards
Johannes

[Rue Nel]

Hello There,

Thank for writing in! The code only enables the widget area to render shortcodes. The text content in the card element does not work the same way as a text widget. If you want to modify it, you’ll need something more. Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Card Element
// =============================================================================
function custom_x_shortcode_card( $atts ) {
  extract( shortcode_atts( array(
    'id'                   => '',
    'class'                => '',
    'style'                => '',
    'animation'            => '',
    'center_vertically'    => '',
    'front_style'          => '',
    'front_icon'           => '',
    'front_icon_size'      => '',
    'front_icon_color'     => '',
    'front_image'          => '',
    'front_image_width'    => '',
    'front_title'          => '',
    'front_text'           => '',
    'back_style'           => '',
    'back_title'           => '',
    'back_text'            => '',
    'back_button_enabled'  => 'true',
    'back_button_text'     => '',
    'back_button_link'     => '',
    'back_button_color'    => '',
    'back_button_bg_color' => '',
    'padding'              => ''
  ), $atts, 'x_card' ) );

  $id                   = ( $id                   != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class                = ( $class                != ''     ) ? 'x-card-outer ' . esc_attr( $class ) : 'x-card-outer';
  $style                = ( $style                != ''     ) ? 'style="' . $style . '"' : '';
  $animation            = ( $animation            != ''     ) ? ' ' . $animation : ' flip-from-left';
  $center_vertically    = ( $center_vertically    == 'true' ) ? ' center-vertically' : '';
  $front_style          = ( $front_style          != ''     ) ? $front_style : 'border: 1px solid #ddd; color: #272727; background-color: #fafafa;';
  $front_icon           = ( $front_icon           != ''     ) ? $front_icon : '';
  $front_icon_size      = ( $front_icon_size      != ''     ) ? $front_icon_size : '36px';
  $front_icon_color     = ( $front_icon_color     != ''     ) ? $front_icon_color : '#272727';
  $front_image          = ( $front_image          != ''     ) ? $front_image : '';
  $front_image_width    = ( $front_image_width    != ''     ) ? $front_image_width : 'auto';
  $front_title          = ( $front_title          != ''     ) ? cs_decode_shortcode_attribute( $front_title ) : 'Front Title';
  $front_text           = ( $front_text           != ''     ) ? cs_decode_shortcode_attribute( $front_text ) : 'This is where the text for the front of your card should go. It\'s best to keep it short and sweet.';
  $back_style           = ( $back_style           != ''     ) ? $back_style : 'border: 1px solid #ddd; color: #272727; background-color: #fafafa;';
  $back_title           = ( $back_title           != ''     ) ? cs_decode_shortcode_attribute( $back_title ) : 'Back Title';
  $back_text            = ( $back_text            != ''     ) ? do_shortcode($back_text) : 'This is where the text for the back of your card should go.';
  $back_button_text     = ( $back_button_text     != ''     ) ? $back_button_text : 'Click Me!';
  $back_button_link     = ( $back_button_link     != ''     ) ? $back_button_link : '#';
  $back_button_color    = ( $back_button_color    != ''     ) ? $back_button_color : '#ffffff';
  $back_button_bg_color = ( $back_button_bg_color != ''     ) ? $back_button_bg_color : '#ff2a13';
  $padding              = ( $padding              != ''     ) ? $padding : '35px';

  if ( $front_image != '' ) {
    $front_graphic = '<div class="x-face-graphic"><img style="margin: 0; width: ' . $front_image_width . ';" src="' . $front_image . '"></div>';
  } else if ( $front_icon != '' ) {
    $front_graphic = '<div class="x-face-graphic"><i style="margin: 0; font-size: ' . $front_icon_size . '; color: ' . $front_icon_color . ';" class="x-icon-' . $front_icon . '" data-x-icon="&#x' . fa_unicode( $front_icon ) . ';"></i></div>';
  } else {
    $front_graphic = '';
  }

  $data = cs_generate_data_attributes( 'card', array() );

  $button_markup  = '';

  if ( 'true' == $back_button_enabled ) {
    $button_markup = "<a class=\"x-face-button\" style=\"color: {$back_button_color}; background-color: {$back_button_bg_color};\" href=\"{$back_button_link}\">{$back_button_text}</a>";
  }

  $output = "<div {$id} class=\"{$class}{$animation}{$center_vertically}\" {$data}{$style}>"
            . '<div class="x-card-inner">'
              . "<div class=\"x-face-outer front\" style=\"{$front_style}\">"
                . '<div class="x-face-inner">'
                  . "<div class=\"x-face-content\" style=\"padding: {$padding};\">"
                    . $front_graphic
                    . "<h4 class=\"x-face-title\">{$front_title}</h4>"
                    . "<p class=\"x-face-text\">{$front_text}</p>"
                  . '</div>'
                . '</div>'
              . '</div>'
              . "<div class=\"x-face-outer back\" style=\"{$back_style}\">"
                . '<div class="x-face-inner">'
                  . "<div class=\"x-face-content\" style=\"padding: {$padding};\">"
                    . "<h4 class=\"x-face-title\">{$back_title}</h4>"
                    . "<p class=\"x-face-text\">{$back_text}</p>"
                    . $button_markup
                  . '</div>'
                . '</div>'
              . '</div>'
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp', 'change_x_card_shortcode');
function change_x_card_shortcode() {
    remove_shortcode( 'x_card' );
    add_shortcode( 'x_card', 'custom_x_shortcode_card' );
}
// =============================================================================

Once you have manage to insert the stripe shortcode button, you might need to remove the built in card button. Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-card-outer .x-face-outer.back .x-face-button{
    display: none;
}

Hope this make sense.

[Johannes G]

Hello,

I’ve followed the instructions you gave me. But it nothing is showing up on the back of the card button. Even the headline of the back of the card dissapeared. Please help.

Here is the site with the cards: https://www.cyclegrinder.com/crowdfunding-cycle/
(I put the shortcode in the first card element)

Here is the shortcode I am trying to put in:
[stripe name=”My Store” description=”My Product” amount=”250″ payment_details_placement=”below”]

Here is the login for you: (Check private post below)

Please help me to get this working. My launch is in the 21st September. So I don’t have much time left to get everything done.

Thank you for your support.
Johannes

[Johannes G]

This reply has been marked as private.

[Johannes G]

UPADTE: I managed to get the showing the headlines again (I forgot the css font-size was huge)

But now it just displays the shortcode as text. ITs not working. Maybe the function isn’t working?

Regards
Johannes

[Johannes G]

OK.
I changed the checkout structure. There is no need for changing everything. Thank you so much for your support.
(I forgot that with WP Simple Pro is not connecting to WooCommerce….I need it to track the status of the funding on the front end)

Thank you
Johannes

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts