Skip to main content

Button Styling & Positioning

The default installation of the Simpler Prestashop module will attach the module (and the Simpler Checkout button) into the most suitable hooks that your theme offers.

If you want to change this or your theme does not offer the relevant hooks you can change this, either by transplanting the Simpler Checkout module to a new hook, or, if you want fine grained control on the positioning, you can call our custom hooks within your child theme.

Inserting the button to a new position using the Back Office Positions Page​

If your theme does not support one of our default hooks, or you want to move the button to a different hook, you can transplant the module by visiting your admin dashboard and navigating to the Design > Positions page.

On the upper right corner you can find the "Transplant a Module" button. Click there and filter out the Simpler Checkout module, and transplant the button to your preferred hook.

Inserting the button using a page builder​

If you're using a page builder to design your storefront, you can use their shortcode functionality to insert the button in the desired positions.

Before you go in your page builder, you will have to enable the custom hooks in the positions page (see above). You will have to enable the 'displaySimplerProductCheckout' and 'displaySimplerCartCheckout' pages.

In your page builder, find the element called 'shortcode' and insert it in your desired position by dragging and dropping. In the shortcode content, insert:

{hook h='displaySimplerProductCheckout' product=$product}

Inserting the button to a new position programmatically​

If you're aiming to have more control over the positioning of the button, you can use custom hooks in your theme's template files.

Before trying to adjust your theme, ensure that the displaySimplerProductCheckout and displaySimplerCartCheckout hooks are enabled in your positions page.

You can then use the following hooks in your child theme, and adjust them however you want.

//template file
{hook h='displaySimplerProductCheckout' product=$product}