How to customize design of anything via Greenshift

Here I just want you to show a quick hack on how you can use Greenshift not only for configuring the design of Greenshift block, but also for customizing any other blocks.

Technically, it’s quite easy, you just need to use Class system which has also a selector feature. Let’s do this, for example for customizing the Checkout page in woocommerce.

First what you need is to wrap the block in the container. Simply click on icon of block and select Convert it to Container. Next step – add Local class. Now, you can simply add subselectors. So, you need to know the class name of the element that you want to customize or select. Don’t forget to add space in subselector, because this means that the child element of this block will be used. So, if I want to customize all text inputs, I add space + input[type=”text”]. It means that I want to select all text inputs which are children of the current block. More about selectors

Quick video

You may see a problem that styles are not working. It’s because elements can have some styles already. Usually, if you enable the Localed option, this will give more priority to class, and class styles will overwrite existing. Sometimes, also local styles have more priority in editor but class styles will work on frontend

«
»