Home / Forums / ePix Support / Code (order button)

Viewing 15 posts - 1 through 15 (of 56 total)
  • Author
    Posts

  • Eric Soh Deffo
    Participant

    Hi,

    I need to add the following code near the images I want to sell :

    Commander

    I tried with the codes button but it does not work, could you help me ?

    Thanks

    Andy
    Andy
    Keymaster

    Hi,

    Have you tried the RAW Html element via Visual Composer?

    Also, have you considered using the Woocommerce plugin to sell your products?


    Eric Soh Deffo
    Participant

    Hi,

    Thanks for your reply.

    I tried the Raw html element but I cannot place it close to the image.

    Could you tell me how I can place the button at the right of the image (but close to the image because I no want the button to be in a column far away).

    Thanks for your valuable advice.

    Andy
    Andy
    Keymaster

    Hi,

    I’d need to see it on the page. If you could create it on the page and I’ll see if there is any CSS we can use to aid it. The other option is to add the an HTML image into the RAW HTML and not use the normal method for inserting images?


    Eric Soh Deffo
    Participant

    Hi,

    As requested you can see it on the following page : http://new.picsmyhome.com/portfolio/play-time

    “Commander” means order in French 🙂

    I would like the order button to be closer to the picture and centered (vertically).

    Is it possible to put the code in an eye catching call to action button so that customers cannot miss it ?

    Thanks again.

    Eric

    Andy
    Andy
    Keymaster

    Hi Eric,

    Personally I would place the “Commander” code directly below the image and keep the row “full width”. It would save what you’re trying to achieve here.

    Unfortunately there is no simple method to make the text vertically align in the middle, without some custom css. You could use a “space” element via the Visual composer.

    It would then move the “Commander” code into the same column as the image and then change the image to “left” align.

    It is possible to style the link, however this would be a customization.


    Eric Soh Deffo
    Participant

    Hi Andy,

    I want to custom the link (order button) by adding the following CSS (.button{text-decoration:none; text-align:center;
    padding:11px 32px;
    border:solid 1px #004F72;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:20px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#000000;
    background-color:#eff5f7;
    background-image: -moz-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -webkit-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -o-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -ms-linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d4cdd2′, endColorstr=’#d4cdd2′,GradientType=0 );
    background-image: linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

    }.button:hover{
    padding:11px 32px;
    border:solid 1px #004F72;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:20px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#000000;
    background-color:#eff5f7;
    background-image: -moz-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -webkit-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -o-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -ms-linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d4cdd2′, endColorstr=’#d4cdd2′,GradientType=0 );
    background-image: linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

    }.button:active{
    padding:11px 32px;
    border:solid 1px #004F72;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:20px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#000000;
    background-color:#eff5f7;
    background-image: -moz-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -webkit-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -o-linear-gradient(top, #eff5f7 0%, #d4cdd2 100%);
    background-image: -ms-linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d4cdd2′, endColorstr=’#d4cdd2′,GradientType=0 );
    background-image: linear-gradient(top, #eff5f7 0% ,#d4cdd2 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

    })
    but I do not know where to insert it. Could you please help me ?

    Andy
    Andy
    Keymaster

    Hi,

    That would need to be placed into Appearance > Theme Options > Customize > Custom CSS.

    I hope that helps?


    Eric Soh Deffo
    Participant

    Hi Andy,

    I paid for the customization.

    I tried to add the code to customize the “commander” button (style) but it does not work. Could you please fix the issue ?

    Thanks

    Eric


    Eric Soh Deffo
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Eric,

    The customization service is no longer available. Can you provide your WP login details and the page where the button is on please, I’ll take a quick look for you.


    Eric Soh Deffo
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Eric,

    You can use the “Set as private reply”, only myself can see this information.


    Eric Soh Deffo
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    I’ve added that CSS in and change the myButton class to the wl-photo-order class.

    I fixed a slight bug in your CSS in Appearance > Theme Options > Customize > Custom CSS too.

Viewing 15 posts - 1 through 15 (of 56 total)

You must be logged in to reply to this topic.