Convert PSD layouts to a WordPress WooCommerce website

  • Posted:
  • Proposals: 14
  • Remote
  • #220022
  • Awarded
Feroz W.Sanchit T.Sterling W.Robert B.Tinku T. + 9 others have already sent a proposal.
  • 1


Experience Level: Intermediate
Convert PSD layouts to a WordPress WooCommerce website

The purpose of the website is to sell personalised condolences cards. The visitor will select a model and will be able to specify the text that will be printed on the card.


• Home page
• Shop page
• Product page
• Cart page
• Payment page
• Confirmation page
• Contact page
• Sales conditions
• Legal statements

Preferably use the Canvas theme (we will supply the license) from WooThemes creating a child theme with all customisation inside the functions.php file or custom templates.

Description and special requirements:

Home page
Left column:
Login widget/shortcode
Track your order widget/shortcode
Link to contact page
Centre column:
2 images with links to the product category
Right column:
Static content

Shop page
Top of the page:
Description of the active step “1 Choisissez votre modèle :”
Name of the shop category “Faire-Part de deuil”
Include a visual graphic of the steps (1 to 4)
Left column:
WooCommerce attribute filters

Product page
Top of the page:
Description of the active step “2 Saisissez le format, la quantité et le texte désiré”
Name of the product “Crépuscule”
Left column:
Image of the card with text overlay.
Text area where the customer can type the text that will be printed on the card.
The text above the card should update as the text is typed. See
The customer select the font. The font of the text on the preview should update live.
Text area where the customer can type the text that will be printed at the bottom of the card.
Right column:
Select the format of the cards (mandatory)
Select the quantity (with a minimum value) (mandatory)
The price will depend on the format of the card and the quantity selected.
The price will reduce with the quantity. For example between 100 and 200 the unit price could be 0.8 cents, between 200 and 300 it could be 0.72 etc...
The content on the far right column is static
When the customer click on the “Valider” button he should be redirected to the shopping cart page.

Note: When the customer click on Validate the text, the format and the quantity should be stored in the global variable in order to populate these if the user decides to later come back to that step to make changes.

Cart page (validation)
Display a preview of the card with the custom text.
Use a popup window when the user click on the sale condition link (CVG).
The checkbox a the bottom of the page are mandatory and the customer can not proceed to the next step unless they are selected.
The customer can either click to Modify the order or proceed to check out.
If the customer click on modify, he should be redireted to the product page with the text, format and quantity preloaded from the information in the global variables.

Recap of the order on the top
WooCommerce standard behaviour for login option, billing and shipping address.
The selection of the payment type is only for information. The customer will have to enter this information on the bank website.
The customer will be redirected to the CIC bank payment page.

Payment gateway
Integration of the CIC payment plugin (will supply the plugin)
(or similar)

Thank you page
Display the order number
Display the estimated delivery date (if ordered before 13:00 next day, otherwise in two days)

Project time scale:
2 weeks testing version on the web server
3 weeks completed project

Other informations:

jpg files attached
PSD files are available.
The project will need to be installed on the client web server.
If you need any commercial plugins (Gravity form, Woocommerce plugins, …) We will cover the cost of the licenses.

Do not hesitate to ask for any clarifications.

This is one of many projects on our list. If we are satisfied with your work, you will have a significant advantage over other candidates in the future.

Best Regards

New Proposal

Create an account now and send a proposal now to get this project.

Sign up

Clarification Board Ask a Question

    There are no clarification messages.