WooCommerce themes setting and customization

Themes & Templates guidelines

Why do I need to do something?

The plugin "scalexpert" override the natives WooCommerce templates to display the scalexpert financing on the following pages: - product - shopping cart - order details (returned page after financing customer journey

Normally, the standard "hierarchy mechanism" of Wordpress templates should ensure that scalexpert code is active. But we recommend strongly to test the render of these pages especially if you are using a specific or customized theme or even a standard theme using "blocks" like for instance the "Twenty TwentyFour" theme.

What do I need if something is wrong!

You have encountered issued when rendering these pages, don't panic 😟 let us guide you in the diagnosis to solve your issue.

First, identify the theme you are using on your back-office "themes" menu:

Wordpress Theme menu management

Second, verify your in "WooCommerce" menu "setting/advanced" that all pages used are filled

Especially check that the "CGV" page is well filled otherwise you will not be able to activate the scalexpert payment button in the checkout page.

WooCommerce advanced pages setting

And also in the "WooCommerce" status menu:

WooCommerce status menu

Once, your theme identified you must found your "theme type": "classic" or "block". According that "type" the method to customize your theme will be different.

Customize a "Block" type theme

Customization of "block" type theme can be done in the wordpress back office menu "Appearance/editor"

We will demonstrate the setting with the standard "Twenty-twenty-four" theme. This theme use directly "woocommerce blocks" and therefore bypass the customization done by scalexpert plugin. We will correct this by overidden some part of the coding.

Open the editor from "appearance/editor" menu

editor menu

Once opened, navigate into "template" menu to open the templates that need to be customized:

• single product

• cart

• check-out

• my account

Select the template, open it then go to the "code editor" menu to access the code of the template.

Then replace existing code by the following:

Samples are to be adapted according your theme used. For instance replace "theme":"twentytwentyfour" by "theme":"YOUR_THEME".

single-product template

<!-- wp:template-part {"slug":"header","theme":"twentytwentyfour"} /-->
<div class="wp-block-group woocommerce product is-layout-flow wp-block-group-
is-layout-flow">
<div class="wp-block-group has-global-padding is-layout-constrained wp-
block-group-is-layout-constrained">
<!-- wp:woocommerce/legacy-template {"template":"single-product"}
/-->
</div>
</div>
<!-- wp:template-part {"slug":"footer","theme":"twentytwentyfour"} /-->

Replace code of a template through editor

After recording, you should see appear the "financing" options in the product page:

Resulting product page after editor change showing the scalexpert financing options

However, it works this solution is incomplete as all "HTML" balises for instance for images blocks are not inherit from the original "TwentytwentyFor" theme. This is only for demonstration purpose and we let you finishing the job 😉

Repeat the same operation for the other templates:

checkout template

[woocommerce_checkout]

cart template

[woocommerce_cart]

my account template

[woocommerce_my_account]

Customize a "Classic" type theme

The WooCommerce template that have been overridden are present in the wordpress directory "/wp-content/plugins/woo-scalexpert/woocommerce"

Woocommerce templates overridden

Code overridden are marked with a commentaire "SG Paiement en plusieurs fois".

sample of code overridden

	...
	<?php else : ?>
	<!--  SG Paiement en plusieurs fois -->
	<p class="woocommerce-notice woocommerce-notice--<?= $classNotice ?> woocommerce-thankyou-order-received">
		<?php
			/**  SG Paiement en plusieurs fois */
			if ( $orderData['payment_method'] == "scalexpert" ) {
				echo apply_filters(
					'woocommerce_thankyou_order_received_text',
					$API_CALL['TextStatus'],
					$order );
			} else {
				echo apply_filters(
					'woocommerce_thankyou_order_received_text',
					esc_html__( 'Thank you. Your order has been received.',
						'woocommerce' ),
					$order );
			}
			/**  SG Paiement en plusieurs fois */
		?>
	</p>
	<!--  SG Paiement en plusieurs fois -->
	...

Don't touch it directly but copy them in your theme directory under "/wp-content/themes/yourtheme/woocommerce/..." and keeping the same structure as found in a the source.

For more information on woocommerce templates structure directory see the related documentation.

Do that resolve your issue?

We hope this tutorial will help you on the resolution of issues you may encountered in the customization of your theme.

No, we are very sorry for that! Because Wordpress theme are quite complex, we can't ensure to cover all the customization cases. If you are a developer we recommend you to read the related "Handbook" from wordpress https://developer.wordpress.org/themes/ and also https://woo.com/document/template-structure/ . Otherwise, we strongly recommend you to look at your IT or your theme support maintenance team.