Para deixar exatamente ao da foto em sua página é necessário mexer no layout do tema. Mas no caso, se você deseja que o pagamento fique diretamente na sua página sem login no pagseguro ou abertura de nova aba, é necessário instalar o plugin WooCommerce Extra Checkout Fields for Brazil, após a instala??o vá nas configura??es desse plugin e altere Exibir Tipo de Pessoa para Pessoa Física Apenas, e ative a op??o de validar CPF.
Também é necessário configurar em WooCommerce>Configura??es e em Locais de venda selecione venda para países especificos, logo abaixo em Vender para países específicos adicione apenas a op??o Brasil, salve e verifique na sua página de checkout se o formulário do pagseguro aparece logo abaixo ou ao lado.
Se você deixar a venda liberada para todos os paises nas configura??es, o checkout do pagseguro só aparece no momento do pagamento se o país do comprador estiver selecionado como Brasil.
Nas configura??es do WooCommerce onde se configura os tokens e email do pagseguro, tb é necessário selecionar as op??es que você deseja liberar como pagamento, cart?o de crédito, débito, boleto…