WooCommerce Buttons

<h1>Buttons plugin installation</h1>
<p> Once you logged in to your WordPress account you must follow the following instructions: </p>
<ul>
   <li>On the left of the screen you will see a sidebar, select the option that says <b>Plugins</b>, and choose the option <b>Add New</b> as shown in the following image</li>
</ul>
<br />

![](https://files.readme.io/acd5a24-1.sidebar.png "1.sidebar.png")

<br />
<ul>
  <li>That takes us to a Plugins menu where we will have to look for ours, in this case in the search bar, we will write the name of our plugin "<b>Clicklease Buttons</b>"</li>
</ul>

![](https://files.readme.io/93982ca-4.png "4.png")

<br />
<ul>
  <li>We will see a the Clicklease chart please click on the "<b>Install Now</b>" option</li>
</ul>

![](https://files.readme.io/0e2f9f3-MicrosoftTeams-image_1.png "MicrosoftTeams-image (1).png")

<br />
<ul>
  <li>Once the plugin is installed, we will see an option called <b>CL Buttons</b> like in the following image, we click that option and you will see an interface where we will start the configuration</li>
</ul>

![](https://files.readme.io/28fb0df-5.png "5.png")

<h1>Buttons Plugin Configuration</h1>

<h2>Button Setup</h2>
Here, we need to add all the information that is <b>required</b>

![](https://files.readme.io/2365c51-ScreenShot-2.png "ScreenShot-2.png")

<br /> 
<ul>
   <li>The first one will be the <b>token</b>, if you don't have any yet go and check <a href="https://docs.clicklease.com/docs/getting-the-partner-token"> Getting Token</a>  to obtain yours.</li>
</ul>

![](https://files.readme.io/7499e02-Token.PNG "Token.PNG")

<br /> 
<ul>
  <li>The next step is to select the <b>Button Color</b></li>
</ul>

![](https://files.readme.io/535074b-ButtonColor.PNG "ButtonColor.PNG")

<br /> 
<ul>
  <li>By clicking on the<b> Button Color</b> you will see the modal with the buttons options <br /> There you can select into two options. Dark background style or light background style.</li>
</ul>

![](https://files.readme.io/dbe5941-SelectButtonColor.PNG "SelectButtonColor.PNG")

<br />
<br />
<ul>
  <li>Next we will click on the checkboxes.<br />The first one is to add the <b>General Benefits</b> flow into the iframe that contains the Clicklease app.<br />The second one is to show the button in the <b>Category Page</b>.<br />The third one is to promote products without price using the Clicklease button.</li>
</ul>

![](https://files.readme.io/99a80c3-CheckBox1.PNG "CheckBox1.PNG")

<br />
<ul>
  <li>If the <b>View General Info Before Application</b> check is clicked, the Benefits Page will appear at the beginning of the Iframe application flow</li>
</ul>

![](https://files.readme.io/7eaa571-BennefitsIframe.PNG "BennefitsIframe.PNG")

<br />
<br />
<ul>
  <li>Next, we have the <b>Button Placement in Product Details Page</b>"</li>
</ul>

![](https://files.readme.io/28985dc-ButtonPlacement.PNG "ButtonPlacement.PNG")

<br />
<br />
<ul>
  <li>Clicking on the <b>Button Placement in Product Details Page</b> we will see the modal for <b> Select button position in product page</b></li>
</ul>

![](https://files.readme.io/7561e09-ButtonPositionModal.PNG "ButtonPositionModal.PNG")

<br />
<br />
<ul>
  <li>We also have the options in case we want to show the <b>Clicklease Button</b> on the <b>Shopping Cart Page</b> .</li>
</ul>

![](https://files.readme.io/402b2bd-ShowInShoppingCart.PNG "ShowInShoppingCart.PNG")

<br />
<br />
<ul>
  <li>Next we will click on the button <b>Button Placement In Shopping Cart</b>.</li>
</ul>

![](https://files.readme.io/ce8050f-ShoppingCart.PNG "ShoppingCart.PNG")

<br />
<br />
<ul>
  <li>Clicking on the <b>Button Placement In Shopping Cart</b> we will see the modal for <b> Select button position in shopping cart page</b> and we can select the position where we want the button</li>
</ul>

![](https://files.readme.io/cd21d03-ButtonShoppingCart.PNG "ButtonShoppingCart.PNG")

<br />
<br />
<ul>
  <li>Finally we have the <b>Show at Checkout</b> checkbox. <br />This will allow us to show the <b>Clicklease Button</b> in the <b>Checkout Page</b></li>
</ul>

![](https://files.readme.io/8741d26-ChecBoxCheckoutPage.PNG "ChecBoxCheckoutPage.PNG")