Now I just have to have the same height as the shop page (if you want to please):

http://www.worldofpixels.be/shop/

Try using below CSS code to achieve this.

.archive.tax-product_cat .sh-titlebar .sh-table {
    padding: 160px 0;
}

And can you also adapt the code so I have the same on my product page belonging to that category, example onhttp://www.worldofpixels.be/product/1/, http://www.worldofpixels.be/product/2/, and so on ?

We can not find out using CSS code whether the product belongs to that category but you can set image to the products separately by using the below CSS code 8594 is product ID.

.single-product.postid-8594 .sh-titlebar {
    background-image: url(//www.worldofpixels.be/wp-content/uploads/2016/03/pexels-photo-v270221.jpeg);
}

 

PS: I can also see some widgets below the product page, how can I edit this product page in general?

To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.