Skip to content
Dermaself Dermaself

Publish

Open Dermaself → Publish. This is where you choose where the button that opens the Skin Test appears. Everything is off until you turn it on: after install, nothing shows in the store.

Every button takes its styling from Customization → Storefront CTA. If you use more than one, it is worth limiting them to different pages or devices.

Floating button

A button pinned to the corner of the screen, on the pages you choose.

  1. Tick Show floating button → Enabled.
  2. Position: Bottom right, Bottom left, or Bottom center.
  3. Devices: All devices, Desktop only, or Mobile only.
  4. Pages:
    • Every page
    • Shop pages only (shop, categories, products, cart, checkout)
    • Homepage only
  5. Click Save placement.

WooCommerce pages

Adds the button inside your shop templates, without editing any theme file.

  • Product page — under “Add to cart”.
  • Shop / category — above the product grid.
  • Cart — above the cart. It works with both the classic cart and the WooCommerce Cart block (the default for new stores). The button appears only when the cart has something in it.

Choose the Devices here too, then Save placement.

Place it yourself

To put the button in a specific spot:

Block editor (Gutenberg)

Add the Dermaself Skin Test button block to any page or post. In the block sidebar you can change the text and the alignment (left, center, right). If you leave the text empty, the one from Customization is used.

Elementor

Search for Dermaself Skin Test in the widget panel. The widget has Button text, Alignment, and Show on (All devices, Desktop only, Mobile only).

Shortcode

[dermaself_quiz_button]

To change the label in that spot only:

[dermaself_quiz_button text="Find my routine"]

Without text, the shortcode uses the text saved in Customization, in the site language.

Your own button

Give any element (a button, a menu item) id="dermaself-quiz", or call window.openSkinAnalysis() from your own code.

Devices and caching

The desktop / mobile choice is applied with CSS, not on the server: it works with page caching plugins too.

If the floating button does not obey

If you see the notice about the dermaself_woo_autoinject_button filter, your theme or another plugin is overriding the setting. Remove the filter to manage it from here again.

Test it in the store

  1. Open the store in a private window (not the admin).
  2. Click the button: the Skin Test opens on top of the page.
  3. Go through consent → quiz → selfie and check the routine.
  4. Add the routine to the cart.
  5. The session should appear on the Dashboard.

If the button does not show: check that you saved the placement, the device filter, and, for the cart, that the cart is not empty.